diff --git a/.eslintrc.js b/.eslintrc.js index f33aca09..4777c276 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -87,5 +87,11 @@ module.exports = { modalNextImage: "readonly", // token-counters.js setupTokenCounters: "readonly", + // localStorage.js + localSet: "readonly", + localGet: "readonly", + localRemove: "readonly", + // resizeHandle.js + setupResizeHandle: "writable" } }; diff --git a/CHANGELOG.md b/CHANGELOG.md index 63a2c7d3..1cd3572c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,183 @@ +## 1.6.0 + +### Features: + * refiner support [#12371](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12371) + * add NV option for Random number generator source setting, which allows to generate same pictures on CPU/AMD/Mac as on NVidia videocards + * add style editor dialog + * hires fix: add an option to use a different checkpoint for second pass ([#12181](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12181)) + * option to keep multiple loaded models in memory ([#12227](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12227)) + * new samplers: Restart, DPM++ 2M SDE Exponential, DPM++ 2M SDE Heun, DPM++ 2M SDE Heun Karras, DPM++ 2M SDE Heun Exponential, DPM++ 3M SDE, DPM++ 3M SDE Karras, DPM++ 3M SDE Exponential ([#12300](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12300), [#12519](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12519), [#12542](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12542)) + * rework DDIM, PLMS, UniPC to use CFG denoiser same as in k-diffusion samplers: + * makes all of them work with img2img + * makes prompt composition posssible (AND) + * makes them available for SDXL + * always show extra networks tabs in the UI ([#11808](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/11808)) + * use less RAM when creating models ([#11958](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/11958), [#12599](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12599)) + * textual inversion inference support for SDXL + * extra networks UI: show metadata for SD checkpoints + * checkpoint merger: add metadata support + * prompt editing and attention: add support for whitespace after the number ([ red : green : 0.5 ]) (seed breaking change) ([#12177](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12177)) + * VAE: allow selecting own VAE for each checkpoint (in user metadata editor) + * VAE: add selected VAE to infotext + * options in main UI: add own separate setting for txt2img and img2img, correctly read values from pasted infotext, add setting for column count ([#12551](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12551)) + * add resize handle to txt2img and img2img tabs, allowing to change the amount of horizontable space given to generation parameters and resulting image gallery ([#12687](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12687), [#12723](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12723)) + * change default behavior for batching cond/uncond -- now it's on by default, and is disabled by an UI setting (Optimizatios -> Batch cond/uncond) - if you are on lowvram/medvram and are getting OOM exceptions, you will need to enable it + * show current position in queue and make it so that requests are processed in the order of arrival ([#12707](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12707)) + * add `--medvram-sdxl` flag that only enables `--medvram` for SDXL models + * prompt editing timeline has separate range for first pass and hires-fix pass (seed breaking change) ([#12457](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12457)) + +### Minor: + * img2img batch: RAM savings, VRAM savings, .tif, .tiff in img2img batch ([#12120](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12120), [#12514](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12514), [#12515](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12515)) + * postprocessing/extras: RAM savings ([#12479](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12479)) + * XYZ: in the axis labels, remove pathnames from model filenames + * XYZ: support hires sampler ([#12298](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12298)) + * XYZ: new option: use text inputs instead of dropdowns ([#12491](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12491)) + * add gradio version warning + * sort list of VAE checkpoints ([#12297](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12297)) + * use transparent white for mask in inpainting, along with an option to select the color ([#12326](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12326)) + * move some settings to their own section: img2img, VAE + * add checkbox to show/hide dirs for extra networks + * Add TAESD(or more) options for all the VAE encode/decode operation ([#12311](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12311)) + * gradio theme cache, new gradio themes, along with explanation that the user can input his own values ([#12346](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12346), [#12355](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12355)) + * sampler fixes/tweaks: s_tmax, s_churn, s_noise, s_tmax ([#12354](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12354), [#12356](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12356), [#12357](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12357), [#12358](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12358), [#12375](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12375), [#12521](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12521)) + * update README.md with correct instructions for Linux installation ([#12352](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12352)) + * option to not save incomplete images, on by default ([#12338](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12338)) + * enable cond cache by default + * git autofix for repos that are corrupted ([#12230](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12230)) + * allow to open images in new browser tab by middle mouse button ([#12379](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12379)) + * automatically open webui in browser when running "locally" ([#12254](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12254)) + * put commonly used samplers on top, make DPM++ 2M Karras the default choice + * zoom and pan: option to auto-expand a wide image, improved integration ([#12413](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12413), [#12727](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12727)) + * option to cache Lora networks in memory + * rework hires fix UI to use accordion + * face restoration and tiling moved to settings - use "Options in main UI" setting if you want them back + * change quicksettings items to have variable width + * Lora: add Norm module, add support for bias ([#12503](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12503)) + * Lora: output warnings in UI rather than fail for unfitting loras; switch to logging for error output in console + * support search and display of hashes for all extra network items ([#12510](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12510)) + * add extra noise param for img2img operations ([#12564](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12564)) + * support for Lora with bias ([#12584](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12584)) + * make interrupt quicker ([#12634](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12634)) + * configurable gallery height ([#12648](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12648)) + * make results column sticky ([#12645](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12645)) + * more hash filename patterns ([#12639](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12639)) + * make image viewer actually fit the whole page ([#12635](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12635)) + * make progress bar work independently from live preview display which results in it being updated a lot more often + * forbid Full live preview method for medvram and add a setting to undo the forbidding + * make it possible to localize tooltips and placeholders + * add option to align with sgm repo's sampling implementation ([#12818](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12818)) + * Restore faces and Tiling generation parameters have been moved to settings out of main UI + * if you want to put them back into main UI, use `Options in main UI` setting on the UI page. + +### Extensions and API: + * gradio 3.41.2 + * also bump versions for packages: transformers, GitPython, accelerate, scikit-image, timm, tomesd + * support tooltip kwarg for gradio elements: gr.Textbox(label='hello', tooltip='world') + * properly clear the total console progressbar when using txt2img and img2img from API + * add cmd_arg --disable-extra-extensions and --disable-all-extensions ([#12294](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12294)) + * shared.py and webui.py split into many files + * add --loglevel commandline argument for logging + * add a custom UI element that combines accordion and checkbox + * avoid importing gradio in tests because it spams warnings + * put infotext label for setting into OptionInfo definition rather than in a separate list + * make `StableDiffusionProcessingImg2Img.mask_blur` a property, make more inline with PIL `GaussianBlur` ([#12470](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12470)) + * option to make scripts UI without gr.Group + * add a way for scripts to register a callback for before/after just a single component's creation + * use dataclass for StableDiffusionProcessing + * store patches for Lora in a specialized module instead of inside torch + * support http/https URLs in API ([#12663](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12663), [#12698](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12698)) + * add extra noise callback ([#12616](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12616)) + * dump current stack traces when exiting with SIGINT + * add type annotations for extra fields of shared.sd_model + +### Bug Fixes: + * Don't crash if out of local storage quota for javascriot localStorage + * XYZ plot do not fail if an exception occurs + * fix missing TI hash in infotext if generation uses both negative and positive TI ([#12269](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12269)) + * localization fixes ([#12307](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12307)) + * fix sdxl model invalid configuration after the hijack + * correctly toggle extras checkbox for infotext paste ([#12304](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12304)) + * open raw sysinfo link in new page ([#12318](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12318)) + * prompt parser: Account for empty field in alternating words syntax ([#12319](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12319)) + * add tab and carriage return to invalid filename chars ([#12327](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12327)) + * fix api only Lora not working ([#12387](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12387)) + * fix options in main UI misbehaving when there's just one element + * make it possible to use a sampler from infotext even if it's hidden in the dropdown + * fix styles missing from the prompt in infotext when making a grid of batch of multiplie images + * prevent bogus progress output in console when calculating hires fix dimensions + * fix --use-textbox-seed + * fix broken `Lora/Networks: use old method` option ([#12466](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12466)) + * properly return `None` for VAE hash when using `--no-hashing` ([#12463](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12463)) + * MPS/macOS fixes and optimizations ([#12526](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12526)) + * add second_order to samplers that mistakenly didn't have it + * when refreshing cards in extra networks UI, do not discard user's custom resolution + * fix processing error that happens if batch_size is not a multiple of how many prompts/negative prompts there are ([#12509](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12509)) + * fix inpaint upload for alpha masks ([#12588](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12588)) + * fix exception when image sizes are not integers ([#12586](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12586)) + * fix incorrect TAESD Latent scale ([#12596](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12596)) + * auto add data-dir to gradio-allowed-path ([#12603](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12603)) + * fix exception if extensuions dir is missing ([#12607](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12607)) + * fix issues with api model-refresh and vae-refresh ([#12638](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12638)) + * fix img2img background color for transparent images option not being used ([#12633](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12633)) + * attempt to resolve NaN issue with unstable VAEs in fp32 mk2 ([#12630](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12630)) + * implement missing undo hijack for SDXL + * fix xyz swap axes ([#12684](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12684)) + * fix errors in backup/restore tab if any of config files are broken ([#12689](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12689)) + * fix SD VAE switch error after model reuse ([#12685](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12685)) + * fix trying to create images too large for the chosen format ([#12667](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12667)) + * create Gradio temp directory if necessary ([#12717](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12717)) + * prevent possible cache loss if exiting as it's being written by using an atomic operation to replace the cache with the new version + * set devices.dtype_unet correctly + * run RealESRGAN on GPU for non-CUDA devices ([#12737](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12737)) + * prevent extra network buttons being obscured by description for very small card sizes ([#12745](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12745)) + * fix error that causes some extra networks to be disabled if both and are present in the prompt + * fix defaults settings page breaking when any of main UI tabs are hidden + * fix incorrect save/display of new values in Defaults page in settings + * fix for Reload UI function: if you reload UI on one tab, other opened tabs will no longer stop working + * fix an error that prevents VAE being reloaded after an option change if a VAE near the checkpoint exists ([#12797](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12737)) + * hide broken image crop tool ([#12792](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12737)) + * don't show hidden samplers in dropdown for XYZ script ([#12780](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12737)) + * fix style editing dialog breaking if it's opened in both img2img and txt2img tabs + * fix a bug allowing users to bypass gradio and API authentication (reported by vysecurity) + * fix notification not playing when built-in webui tab is inactive ([#12834](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12834)) + * honor `--skip-install` for extension installers ([#12832](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12832)) + * don't print blank stdout in extension installers ([#12833](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12832), [#12855](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12855)) + * do not change quicksettings dropdown option when value returned is `None` ([#12854](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/12854)) + * get progressbar to display correctly in extensions tab + + +## 1.5.2 + +### Bug Fixes: + * fix memory leak when generation fails + * update doggettx cross attention optimization to not use an unreasonable amount of memory in some edge cases -- suggestion by MorkTheOrk + + +## 1.5.1 + +### Minor: + * support parsing text encoder blocks in some new LoRAs + * delete scale checker script due to user demand + +### Extensions and API: + * add postprocess_batch_list script callback + +### Bug Fixes: + * fix TI training for SD1 + * fix reload altclip model error + * prepend the pythonpath instead of overriding it + * fix typo in SD_WEBUI_RESTARTING + * if txt2img/img2img raises an exception, finally call state.end() + * fix composable diffusion weight parsing + * restyle Startup profile for black users + * fix webui not launching with --nowebui + * catch exception for non git extensions + * fix some options missing from /sdapi/v1/options + * fix for extension update status always saying "unknown" + * fix display of extra network cards that have `<>` in the name + * update lora extension to work with python 3.8 + + ## 1.5.0 ### Features: diff --git a/CITATION.cff b/CITATION.cff new file mode 100644 index 00000000..2c781aff --- /dev/null +++ b/CITATION.cff @@ -0,0 +1,7 @@ +cff-version: 1.2.0 +message: "If you use this software, please cite it as below." +authors: + - given-names: AUTOMATIC1111 +title: "Stable Diffusion Web UI" +date-released: 2022-08-22 +url: "https://github.com/AUTOMATIC1111/stable-diffusion-webui" diff --git a/CODEOWNERS b/CODEOWNERS index bfa1095d..7438c9bc 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,4 +1,4 @@ -* @anapnoe +* @AUTOMATIC1111 # if you were managing a localization and were removed from this file, this is because # the intended way to do localizations now is via extensions. See: diff --git a/launch.py b/launch.py index e4c2ce99..f83820d2 100644 --- a/launch.py +++ b/launch.py @@ -25,6 +25,13 @@ start = launch_utils.start def main(): + if args.dump_sysinfo: + filename = launch_utils.dump_sysinfo() + + print(f"Sysinfo saved as {filename}. Exiting...") + + exit(0) + launch_utils.startup_timer.record("initial startup") with launch_utils.startup_timer.subcategory("prepare environment"): diff --git a/requirements.txt b/requirements.txt index b3f8a7f4..80b43845 100644 --- a/requirements.txt +++ b/requirements.txt @@ -6,8 +6,9 @@ basicsr blendmodes clean-fid einops +fastapi>=0.90.1 gfpgan -gradio==3.32.0 +gradio==3.41.2 inflection jsonmerge kornia @@ -30,4 +31,4 @@ tomesd torch torchdiffeq torchsde -transformers==4.25.1 +transformers==4.30.2 diff --git a/requirements_versions.txt b/requirements_versions.txt index d07ab456..f8ae1f38 100644 --- a/requirements_versions.txt +++ b/requirements_versions.txt @@ -1,13 +1,13 @@ -GitPython==3.1.30 +GitPython==3.1.32 Pillow==9.5.0 -accelerate==0.18.0 +accelerate==0.21.0 basicsr==1.4.2 blendmodes==2022 clean-fid==0.1.35 einops==0.4.1 fastapi==0.94.0 gfpgan==1.3.8 -gradio==3.32.0 +gradio==3.41.2 httpcore==0.15 inflection==0.5.1 jsonmerge==1.8.0 @@ -22,10 +22,10 @@ pytorch_lightning==1.9.4 realesrgan==0.3.0 resize-right==0.0.2 safetensors==0.3.1 -scikit-image==0.20.0 -timm==0.6.7 -tomesd==0.1.2 +scikit-image==0.21.0 +timm==0.9.2 +tomesd==0.1.3 torch torchdiffeq==0.2.3 torchsde==0.2.5 -transformers==4.25.1 +transformers==4.30.2 diff --git a/script.js b/script.js index a406d4b8..34cca765 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,13 @@ function gradioApp() { - const elems = document.getElementsByTagName('gradio-app'); - const elem = elems.length == 0 ? document : elems[0]; + const elems = document.getElementsByTagName('gradio-app'); + const elem = elems.length == 0 ? document : elems[0]; - if (elem !== document) { - elem.getElementById = function(id) { - return document.getElementById(id); - }; - } - return elem.shadowRoot ? elem.shadowRoot : elem; + if (elem !== document) { + elem.getElementById = function(id) { + return document.getElementById(id); + }; + } + return elem.shadowRoot ? elem.shadowRoot : elem; } /** @@ -37,7 +37,7 @@ var uiCurrentTab = null; * The callback receives an array of MutationRecords as an argument. */ function onUiUpdate(callback) { - uiUpdateCallbacks.push(callback); + uiUpdateCallbacks.push(callback); } /** @@ -57,7 +57,7 @@ function onAfterUiUpdate(callback) { * The callback receives no arguments. */ function onUiLoaded(callback) { - uiLoadedCallbacks.push(callback); + uiLoadedCallbacks.push(callback); } /** @@ -65,7 +65,7 @@ function onUiLoaded(callback) { * The callback receives no arguments. */ function onUiTabChange(callback) { - uiTabChangeCallbacks.push(callback); + uiTabChangeCallbacks.push(callback); } /** @@ -74,7 +74,7 @@ function onUiTabChange(callback) { * @param callback */ function onOptionsChanged(callback) { - optionsChangedCallbacks.push(callback); + optionsChangedCallbacks.push(callback); } function executeCallbacks(queue, arg) { @@ -103,11 +103,11 @@ function scheduleAfterUiUpdateCallbacks() { var executedOnLoaded = false; document.addEventListener("DOMContentLoaded", function() { - var mutationObserver = new MutationObserver(function(m) { - if (!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')) { - executedOnLoaded = true; - executeCallbacks(uiLoadedCallbacks); - } + var mutationObserver = new MutationObserver(function(m) { + if (!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')) { + executedOnLoaded = true; + executeCallbacks(uiLoadedCallbacks); + } executeCallbacks(uiUpdateCallbacks, m); scheduleAfterUiUpdateCallbacks(); @@ -121,43 +121,43 @@ document.addEventListener("DOMContentLoaded", function() { }); /** -* Add a ctrl+enter as a shortcut to start a generation -*/ + * Add a ctrl+enter as a shortcut to start a generation + */ document.addEventListener('keydown', function(e) { - var handled = false; - if (e.key !== undefined) { - if ((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; - } else if (e.keyCode !== undefined) { - if ((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; - } - if (handled) { - var button = get_uiCurrentTabContent().querySelector('button[id$=_generate]'); - if (button) { - button.click(); - } - e.preventDefault(); - } + var handled = false; + if (e.key !== undefined) { + if ((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; + } else if (e.keyCode !== undefined) { + if ((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; + } + if (handled) { + var button = get_uiCurrentTabContent().querySelector('button[id$=_generate]'); + if (button) { + button.click(); + } + e.preventDefault(); + } }); /** -* checks that a UI element is not in another hidden element or tab content -*/ + * checks that a UI element is not in another hidden element or tab content + */ function uiElementIsVisible(el) { - if (el === document) { - return true; - } + if (el === document) { + return true; + } - const computedStyle = getComputedStyle(el); - const isVisible = computedStyle.display !== 'none'; + const computedStyle = getComputedStyle(el); + const isVisible = computedStyle.display !== 'none'; - if (!isVisible) return false; - return uiElementIsVisible(el.parentNode); + if (!isVisible) return false; + return uiElementIsVisible(el.parentNode); } function uiElementInSight(el) { - const clRect = el.getBoundingClientRect(); - const windowHeight = window.innerHeight; - const isOnScreen = clRect.bottom > 0 && clRect.top < windowHeight; + const clRect = el.getBoundingClientRect(); + const windowHeight = window.innerHeight; + const isOnScreen = clRect.bottom > 0 && clRect.top < windowHeight; - return isOnScreen; -} \ No newline at end of file + return isOnScreen; +} diff --git a/style.css b/style.css index e1316ccb..a294d361 100644 --- a/style.css +++ b/style.css @@ -1,46 +1,4 @@ -:root { - --ae-main-bg-color: hsl(0deg 0% 10%); - --ae-primary-color: hsl(168deg 97% 41%); - --ae-input-bg-color: hsl(225deg 6% 13%); - --ae-input-border-color: hsl(214deg 5% 30%); - --ae-panel-bg-color: hsl(225deg 5% 17%); - --ae-panel-border-color: hsl(214deg 5% 30%); - --ae-panel-border-radius: 0px; - --ae-subgroup-bg-color: hsl(0deg 0% 10%); - --ae-subgroup-input-bg-color: hsl(225deg 6% 13%); - --ae-subgroup-input-border-color: hsl(214deg 5% 30%); - --ae-subpanel-bg-color: hsl(220deg 4% 14%); - --ae-subpanel-border-color: hsl(214deg 5% 30%); - --ae-subpanel-border-radius: 8px; - --ae-textarea-focus-color: hsl(210deg 3% 36%); - --ae-input-focus-color: hsl(168deg 97% 41%); - --ae-outside-gap-size: 8px; - --ae-inside-padding-size: 8px; - --ae-tool-button-size: 34px; - --ae-tool-button-radius: 16px; - --ae-generate-button-height: 70px; - --ae-cancel-color: hsl(0deg 84% 60%); - --ae-max-padding: max( - var(--ae-outside-gap-size), - var(--ae-inside-padding-size) - ); - --ae-icon-color: hsl(168deg 97% 41%); - --ae-icon-hover-color: hsl(0deg 0% 10%); - --ae-icon-size: 22px; - --ae-nav-bg-color: hsl(0deg 0% 4%); - --ae-nav-color: hsl(210deg 4% 80%); - --ae-nav-hover-color: hsl(0deg 0% 4%); - --ae-input-color: hsl(210deg 4% 80%); - --ae-label-color: hsl(210deg 4% 80%); - --ae-subgroup-input-color: hsl(210deg 4% 80%); - --ae-placeholder-color: hsl(214deg 5% 30%); - --ae-text-color: hsl(210deg 4% 80%); - --ae-mobile-outside-gap-size: 2px; - --ae-mobile-inside-padding-size: 2px; - --ae-frame-bg-color: hsl(225deg 6% 13%); - --ae-modal-bg-color: hsl(0deg 0% 10%); - --ae-modal-icon-color: hsl(168deg 97% 41%); -} /*BREAKPOINT_CSS_CONTENT*/ +:root{--ae-main-bg-color:hsl(0deg 0% 10%);--ae-primary-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(225deg 7% 11%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(210deg 6% 20%);--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max( var(--ae-outside-gap-size), var(--ae-inside-padding-size) );--ae-icon-size:22px;--ae-label-color:hsl(216deg 5% 60%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-gap-size-val:5px;--ae-input-font-size:14px;--ae-input-line-height:14px;--ae-input-border-size:1px;--ae-input-border-radius:5px;--ae-input-padding:5px;--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:2px;--ae-group-padding:2px;--ae-group-radius:6px;--ae-group-border-size:1px;--ae-group-gap:5px;--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-border-color:hsl(225deg 6% 13%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-input-text-color:hsl(168deg 97% 41%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-hover-text-color:hsl(168deg 96% 80%);}/*BREAKPOINT_CSS_CONTENT*/ /* Theme Name: DarkUX @@ -49,4320 +7,8 @@ Author URI: https://github.com/anapnoe/stable-diffusion-webui Version: 1.0 License: GNU General Public License */ -:root { - --ae-extra-networks-card-size: 1; - --ae-extra-networks-card-real-size: calc( - var(--ae-extra-networks-card-size) * 14vh - ); - --ae-extra-networks-visible-rows: 2; - --ae-extra-networks-height: calc( - ( - var(--ae-extra-networks-card-real-size) * - var(--ae-extra-networks-visible-rows) - ) + (var(--ae-inside-padding-size) * 2) - ); - --ae-extra-networks-name-size: calc(var(--ae-extra-networks-card-size) * 1em); - --ae-top-header-padding-top: 16px; - --ae-top-header-padding-bottom: 16px; - --ae-top-header-inner-height: 38px; - --ae-top-header-height: calc( - var(--ae-top-header-padding-top) + var(--ae-top-header-inner-height) + - var(--ae-top-header-padding-bottom) - ); - - --ae-container-padding: 16px; - --ae-footer-height: calc(32px + (var(--ae-container-padding) * 2)); - --ae-gallery-bottom-height: calc( - 24px + (var(--ae-max-padding) * 2) + 16px + - (var(--ae-inside-padding-size) * 2) + (var(--ae-outside-gap-size) * 3) - ); - - --ae-subtract-total: calc( - var(--ae-top-header-height) + var(--ae-footer-height) - ); - --ae-container-height: calc(100vh - var(--ae-subtract-total)); - --ae-container-total-height: calc( - var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) - - (var(--ae-inside-padding-size) * 2) - ); - --ae-container-height-gap: calc( - var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) - ); - --ae-container-height-pad: calc( - var(--ae-container-height) - (var(--ae-inside-padding-size) * 2) - ); - - --ae-processing-border: 2px; - --ae-processing-border-double: var(--ae-processing-border) * 2; - - --ae-slider-bg-overlay: transparent; - - --ae-border-width: 1px; - --ae-accordion-vertical-padding: max(8px, var(--ae-inside-padding-size)); - --ae-accordion-horizontal-padding: max(4px, var(--ae-inside-padding-size)); - --ae-accordion-line-height: 24px; - --ae-accordion-header-height: calc( - var(--ae-accordion-line-height) + var(--ae-accordion-vertical-padding) * 2 - ); - - --ae-results-height: calc( - 100vh - - ( - var(--ae-top-header-height) + var(--ae-footer-height) + - var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 + - 36px - ) - ); -} - -@media only screen and (max-width: 860px) { - :root { - --ae-outside-gap-size: var(--ae-mobile-outside-gap-size); - --ae-inside-padding-size: var(--ae-mobile-inside-padding-size); - } -} - -body { - background-color: var(--ae-main-bg-color) !important; -} - -.hidden { - display: none !important; -} - -.app.svelte-1mya07g.svelte-1mya07g { - position: relative; - margin: auto; - padding: var(--size-4); - padding-top: 0; - width: 100%; - min-height: 100vh !important; - min-width: unset !important; - max-width: unset !important; - background-color: var(--ae-main-bg-color); -} - -.block.svelte-mppz8v { - line-height: 16px !important; -} - -/*********/ -/* Icons */ -/*********/ -[id*="2img_generate_forever"], -[id^="refresh_"], -[id$="_refresh"], -[id$="_clear_prompt"], -[id$="2img_style_create"], -[id$="2img_style_apply"], -[id$="2img_extra_networks"], -[id$="paste"], -#img2img_actions_column [id$="interrogate"], -#img2img_actions_column [id$="deepbooru"], -[id^="open_folder"], -[id*="2img_random"], -[id*="2img_reuse"], -[id^="save_"], -[id^="save_zip_"], -[id="extras_tab"], -[id="img2img_tab"], -[id="inpaint_tab"], -[id="txt2img_tab"] { - /*background-color: var(--ae-panel-bg-color);*/ - position: relative; - font-size: 0 !important; -} -[id*="2img_generate_forever"]::before, -[id$="_refresh"]::before, -[id^="refresh_"]::before, -[id$="_clear_prompt"]::before, -[id$="2img_style_create"]::before, -[id$="2img_style_apply"]::before, -[id$="2img_extra_networks"]::before, -[id$="paste"]::before, -#img2img_actions_column [id$="interrogate"]::before, -#img2img_actions_column [id$="deepbooru"]::before, -[id^="open_folder"]::before, -[id*="2img_random"]::before, -[id*="2img_reuse"]::before, -[id^="save_"]::before, -[id^="save_zip_"]::before, -[id="extras_tab"]::before, -[id="img2img_tab"]::before, -[id="inpaint_tab"]::before, -[id="txt2img_tab"]::before { - content: " "; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - position: absolute; -} - -[id*="2img_random"]::before, -[id*="2img_reuse"]::before { - background-color: var(--ae-icon-color); - border-radius: var(--ae-panel-border-radius); -} -[id*="2img_generate_forever"]:hover::before, -[id$="_refresh"]:hover::before, -[id^="refresh_"]:hover::before, -[id$="_clear_prompt"]:hover::before, -[id$="2img_style_create"]:hover::before, -[id$="2img_style_apply"]:hover::before, -[id$="2img_extra_networks"]:hover::before, -[id$="paste"]:hover::before, -#img2img_actions_column [id$="interrogate"]:hover::before, -#img2img_actions_column [id$="deepbooru"]:hover::before, -[id^="open_folder"]:hover::before, -[id*="2img_random"]:hover::before, -[id*="2img_reuse"]:hover::before, -[id^="save_"]:hover::before, -[id^="save_zip_"]:hover::before, -[id="extras_tab"]:hover::before, -[id="img2img_tab"]:hover::before, -[id="inpaint_tab"]:hover::before, -[id="txt2img_tab"]:hover::before { - background-color: var(--ae-icon-hover-color); -} - -[id$="2img_extra_networks"] { - border: 1px solid var(--ae-input-border-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-input-bg-color) !important; -} - -[id$="2img_extra_networks"]:hover { - background-color: var(--ae-icon-color) !important; -} - -[id$="_refresh"]::before, -[id^="refresh_"]::before { - -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; -} -[id$="2img_generate_forever"]::before { - -webkit-mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%; - width: 90%; - height: 90%; -} -[id$="_clear_prompt"]::before { - -webkit-mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; -} - -[id$="2img_style_create"]::before { - -webkit-mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; -} - -[id$="2img_style_apply"]::before { - -webkit-mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; -} - -[id$="paste"]::before { - -webkit-mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; -} - -[id$="2img_extra_networks"]::before { - -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; -} - -#img2img_actions_column [id$="interrogate"]::before { - -webkit-mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; -} - -#img2img_actions_column [id$="deepbooru"]::before { - -webkit-mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; -} - -[id^="open_folder"]::before { - -webkit-mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; -} - -[id*="2img_random"]::before { - -webkit-mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; -} - -[id*="2img_reuse"]::before { - -webkit-mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; -} - -[id^="save_"]::before { - -webkit-mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; -} - -[id^="save_zip_"]::before { - -webkit-mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; -} - -[id="extras_tab"]::before { - -webkit-mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat - 50% 50%; - mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat 50% 50%; -} - -[id="img2img_tab"]::before { - -webkit-mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; -} - -[id="inpaint_tab"]::before { - -webkit-mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; -} - -[id="txt2img_tab"]::before { - -webkit-mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; -} - -/*************/ -/* TopHeader */ -/*************/ - -#tabs { - margin-top: calc(var(--ae-top-header-height)); - min-height: var(--ae-container-height); -} - -#header-top { - position: fixed; - top: 0px; - left: 0; - right: 0; - z-index: 10000; - min-height: var(--ae-top-header-inner-height); - background-color: var(--ae-main-bg-color); - padding-left: 1rem; - padding-right: 1rem; - padding-top: var(--ae-top-header-padding-top); - padding-bottom: var(--ae-top-header-padding-bottom); -} - -#nav_menu_header_tabs { - position: relative; - height: 34px; - align-self: center; - flex-grow: 2; - line-height: 14px; -} - -#nav_menu_header_tabs button { - font-size: 14px; - flex: 1 1 auto; - flex-grow: 0; - min-width: unset; - padding-bottom: 0; - padding-right: 0; - padding-top: 0; - border: 0; - color: var(--ae-nav-color); - background: 0 !important; - padding-left: 10px; - opacity: 0.75; -} - -#nav_menu_header_tabs button.selected { - color: var(--ae-primary-color); - opacity: 1; -} - -#nav_menu_header_tabs button:hover { - opacity: 1; -} - -.container { - padding: var(--ae-container-padding); - color: var(--ae-input-color); -} - -#quicksettings { - align-items: center; - width: auto; - background: 0; - padding: 0; - position: relative; - max-height: 34px; - align-self: center; - min-width: min(60px, 100%); -} - -#extra_networks_menu, -#quick_menu { - z-index: 9999; - background-color: var(--ae-input-bg-color); - position: relative; - width: 38px; - height: 38px; - border-radius: 100%; - cursor: pointer; - min-width: unset; - max-width: 38px; - align-self: center; -} - -#extra_networks_menu::before, -#quick_menu::before { - content: " "; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - -webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; - cursor: pointer; - position: relative; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(1); -} - -#extra_networks_menu::before { - -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; -} - -#extra_networks_menu.fixed, -#extra_networks_menu:hover, -#quick_menu:hover { - background-color: var(--ae-icon-color); -} - -#extra_networks_menu.fixed::before, -#extra_networks_menu:hover::before, -#quick_menu:hover::before { - background-color: var(--ae-icon-hover-color); -} - -[id$="nav_menu"] { - z-index: 9999; - background-color: var(--ae-input-bg-color); - position: relative; - width: 38px; - height: 38px; - border-radius: 100%; - cursor: pointer; - max-width: 38px; - min-width: unset !important; - align-self: center; -} - -[id$="nav_menu"]::before { - content: " "; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - -webkit-mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; - cursor: pointer; - position: relative; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(1); -} - -[id$="nav_menu"]:hover { - background-color: var(--ae-icon-color); -} - -[id$="nav_menu"]:hover::before { - background-color: var(--ae-icon-hover-color); -} - -#clone_nav_menu { - position: fixed; - z-index: 10000; - left: 1rem; - top: var(--ae-top-header-padding-top); -} - -/***********************************/ -/* Progressbar */ -/***********************************/ - -.progressDiv { - background-color: var(--ae-main-bg-color) !important; - border-radius: 0 !important; - height: 16px; - position: fixed; - z-index: 10000; - top: 0px; - /* width: calc(100% - 16px) !important; */ - left: 0; - width: 100% !important; - /* border: 1px solid var(--ae-panel-border-color); */ -} - -.progressDiv .progress { - width: 0%; - height: 3px; - background-color: var(--ae-primary-color); - color: var(--ae-input-color); - line-height: 20px; - text-align: right; - border-radius: 0; - padding: 0 2px; - font-size: 12px; - white-space: nowrap; - font-weight: 600; -} - -/****************/ -/* Live preview */ -/****************/ - -.livePreview { - position: absolute !important; - width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; - max-height: calc(var(--ae-container-height-gap)) !important; - top: var(--ae-outside-gap-size); - left: var(--ae-outside-gap-size); - right: 0; - bottom: 0; - pointer-events: all; - overflow: hidden !important; - background-color: var(--ae-main-bg-color); - z-index: 300; - box-sizing: border-box; - padding: var(--ae-processing-border); - border: 1px solid var(--ae-panel-border-color); - height: calc(var(--ae-container-height-gap)) !important; -} - -.livePreview img { - background-color: var(--ae-main-bg-color) !important; - border-radius: 0 !important; - box-sizing: border-box; - position: absolute; - width: calc(100% - var(--ae-processing-border-double)); - height: calc(100% - var(--ae-processing-border-double)); - object-fit: scale-down; - margin: auto; -} - -div.svelte-10ogue4 > *:first-child.livePreview { - border-radius: 0 !important; -} - -@keyframes rotate { - 100% { - transform: scale(2) rotate(1turn); - } -} - -.livePreview:not(.dropPreview)::before { - content: ""; - position: absolute; - z-index: -2; - left: -50%; - top: -50%; - width: 200%; - height: 200%; - background-color: var(--ae-main-bg-color); - background-repeat: no-repeat; - background-position: 0 0; - background-image: conic-gradient( - transparent, - var(--ae-primary-color), - transparent 30% - ); - animation: rotate 4s linear infinite; -} - -.livePreview::after { - content: ""; - position: absolute; - z-index: -1; - left: var(--ae-processing-border); - top: var(--ae-processing-border); - width: calc(100% - var(--ae-processing-border-double)); - height: calc(100% - var(--ae-processing-border-double)); - background: var(--ae-main-bg-color); - border-radius: 0; -} - -.livePreview::before { - content: ""; - position: absolute; - z-index: -2; - left: -50%; - top: -50%; - width: 200%; - height: 200%; - background-color: var(--ae-main-bg-color); - background-repeat: no-repeat; - background-position: 0 0; - background-image: conic-gradient( - transparent, - var(--ae-primary-color), - transparent 30% - ); - animation: rotate 4s linear infinite; -} - -.livePreview.dropPreview::before, -.livePreview.dropPreview::after { - display: none; -} - -.livePreview img { - object-position: center !important; - border-radius: 0 !important; - position: relative; - top: 0 !important; - left: 0 !important; - width: calc(100%) !important; - height: calc(100%) !important; -} - -.livePreview img:nth-child(2) { - position: absolute !important; - top: 50% !important; - left: 50% !important; - transform: translateX(-50%) translateY(-50%) !important; - width: calc(100% - var(--ae-processing-border-double)) !important; - height: calc(100% - var(--ae-processing-border-double)) !important; -} - -.livePreview.init, -.livePreview:not(.init) + div { - display: none; -} - -.livePreview { - max-height: unset !important; - position: relative !important; - left: 0; - top: 0; - width: auto !important; -} - -[id^="download_files_"] div.float:not(.float) { - position: absolute !important; -} - -#image_buttons_txt2img + div, -#image_buttons_img2img + div, -#image_buttons_extras_2img + div { - margin-top: calc(var(--ae-outside-gap-size) * -0.5); - margin-bottom: calc(var(--ae-outside-gap-size) * -0.5); -} - -button.svelte-1p4r00v { - background-color: var(--ae-input-bg-color); - color: var(--ae-icon-color); - border-radius: var(--ae-panel-border-radius); -} - -button.svelte-1p4r00v:hover { - background-color: var(--ae-primary-color); - color: var(--ae-icon-hover-color); -} - -/* [id$="2img_gallery"] div.modify-upload{ - position:absolute; -} -[id$="2img_gallery"], -[id$="2img_gallery"] div>img, -[id$="2img_gallery"] div.backdrop-blur, -[id$="2img_gallery"] img+div.overflow-x-scroll{ - position:relative; - height: auto !important; - min-height: auto; - border-radius: 0 !important; -} -[id$="2img_gallery"], -[id$="2img_gallery"] div>img, -[id$="2img_gallery"] div.backdrop-blur -{ - max-height: unset !important; -} -[id$="2img_gallery"] div>img{ - object-fit: contain; -} -[id$="2img_gallery"] .overflow-y-auto { - min-height: auto !important; -} */ -[id^="img2img_copy_to_"] { - padding: 0 !important; - margin-bottom: var(--ae-outside-gap-size) !important; - background: transparent !important; -} - -[id^="img2img_label_copy_to_"] { - min-width: unset !important; -} - -[id^="img2img_copy_to_"] > * { - font-size: 100% !important; - white-space: nowrap; - align-self: center; -} - -.image-container { - min-height: 25vh; -} - -.spl-pane div.svelte-s6ybro, -.spl-pane .wrap.svelte-p4aq0j.svelte-p4aq0j { - display: none; -} - -.spl-pane .wrap.svelte-yigbas { - position: unset; -} - -.center.boundedheight.flex { - width: 100% !important; - height: 100% !important; -} - -div.svelte-1oo81b7 > *:first-child, -div.svelte-1oo81b7 > *:last-child { - border-radius: 0 !important; -} - -/* small info upload*/ -div.float { - background: var(--ae-main-bg-color) !important; - border: 0 !important; - color: var(--ae-primary-color) !important; -} - -#img2img_inpaint_upload_tab > div:first-child { - flex-direction: row; -} - -/****************/ -/* Results View */ -/****************/ -.main > .wrap > .contain > div { - gap: 0px !important; -} - -[id$="2img_results"] { - /*flex-direction: row !important;*/ - overflow-x: hidden !important; - max-height: calc(var(--ae-container-height)); - overflow-y: auto !important; - height: 100%; - flex-direction: column !important; - flex-wrap: nowrap !important; -} - -[id$="2img_gallery"] { - display: flex; - flex-direction: row; - overflow: hidden !important; - margin-bottom: 0 !important; -} - -[id$="2img_gallery"] .grid-wrap, -[id$="2img_gallery"] .empty { - width: 100%; - /* max-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important; - min-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important; */ - max-height: var(--ae-results-height) !important; - min-height: var(--ae-results-height) !important; - overflow-x: hidden !important; -} - -[id$="2img_gallery"] .preview.fixed-height { - max-height: unset; - background-color: var(--ae-main-bg-color) !important; -} - -[id$="2img_gallery"] .thumbnails { - background-color: var(--ae-panel-bg-color); - height: 60px !important; -} - -.thumbnails button { - margin: auto; -} - -.thumbnails { - justify-content: unset !important; -} - -[id$="2img_gallery"] .thumbnail-small { - height: auto !important; -} - -[id$="2img_gallery"] .thumbnail-small.selected { - --ring-color: var(--ae-primary-color) !important; - border-color: var(--ae-primary-color) !important; -} - -[id$="2img_results"] .preview + img { - cursor: pointer; -} - -[id$="2img_gallery"] .preview.fixed-height { - height: auto; - min-height: auto; - width: 100%; - min-width: 100%; - max-height: calc(var(--ae-container-height) - 4px); -} - -[id$="2img_override_settings_row"] > div.form.show, -[id$="2img_override_settings_row"] - > div.form.show - > [id$="2img_override_settings"] { - display: block !important; -} - -/* [id$="2img_gallery"] .overflow-y-auto>div:first-child -{ - height: calc(var(--ae-container-total-height) - (var(--ae-outside-gap-size) * 2) - var(--ae-gallery-bottom-height) ); -} -[id$="2img_gallery"] div>img -{ - height: calc(100% - 60px); - width: auto; - object-fit: scale-down; - background-color: var(--ae-main-bg-color) !important; -} */ - -/* -[id$="2img_gallery"] .backdrop-blur -{ - height: auto; - min-height: auto; - width: 100%; - min-width: 100%; - max-height: calc(var(--ae-container-height) - 4px); - - -} -[id$="2img_gallery"] img+div -{ - background-color: var(--ae-input-bg-color) !important; -} -[id$="2img_gallery"] div>div -{ - min-height: auto; -} -.gallery-item.svelte-1g9btlg.svelte-1g9btlg { - position: relative; - aspect-ratio: unset !important; - border-radius: 0 !important; - background-color: var(--ae-main-bg-color) !important; - --tw-ring-color: var(--ae-panel-border-color) !important; -} -.file-preview{ - margin:0; - color: var(--ae-text-color); -} -.file-preview > div > div:first-child{ - flex-grow:1; -} -.w-3\/12 {width: auto;} -a{color:var(--ae-primary-color)!important;} -#image_buttons_txt2img + div, -#image_buttons_img2img + div, -#image_buttons_extras_2img + div -{ - margin-top: calc(var(--ae-outside-gap-size) * -0.5); - margin-bottom: calc(var(--ae-outside-gap-size) * -0.5); -} - */ -/* -#top_row_sd_model_checkpoint { - position: absolute; - z-index: 9999; - max-width: 290px; - right: 0; -} -#top_row_sd_model_checkpoint div { - border: 0; - background: 0; - padding: 0 !important; -} -#top_row_sd_model_checkpoint span { -display:none; -} -#top_row_sd_model_checkpoint .gr-input { -padding-right: 37px; -min-height: 34px; -} -*/ -.gradio-dropdown:not(.multiselect) .token-remove { - display: none !important; -} - -#top_row_sd_model_checkpoint div { - max-height: unset; - min-width: min(20px, 100%); -} - -#top_row_sd_model_checkpoint { - position: absolute; - z-index: 9999; - max-width: 290px; - right: 0; - max-height: 34px; -} - -#top_row_sd_model_checkpoint > div, -#row_setting_sd_model_checkpoint > div, -#setting_sd_model_checkpoint > div, -#setting_sd_model_checkpoint { - border: 0; - padding: 0 !important; -} - -#setting_sd_model_checkpoint > label > span, -#row_setting_sd_model_checkpoint > div:nth-child(2) { - display: none; -} - -#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child { - flex-wrap: nowrap; - padding: 0; - height: 32px; -} - -#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child > span { - white-space: nowrap; - overflow: hidden; -} - -#top_row_sd_model_checkpoint button { - min-width: unset; - height: 34px; - max-width: 34px; -} - -#top_row_sd_model_checkpoint > div.form { - overflow: visible; -} - -#top_row_sd_model_checkpoint div { - border-radius: var(--ae-panel-border-radius) !important; -} - -div.svelte-b6y5bg, -div.gradio-row > .form { - overflow: visible !important; -} - -.dropdown-arrow { - min-width: var(--size-5); -} - -/* .gradio-dropdown{ - position:relative!important; -} */ - -.gradio-dropdown input { - color: var(--ae-input-color) !important; -} - -ul.options { - width: auto; - background: var(--ae-input-bg-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - border-color: var(--ae-input-border-color); - border-width: var(--ae-border-width); - max-height: 25vh !important; - padding: 1px; - z-index: 9999 !important; -} - -ul.options li { - width: 100% !important; - display: inline-block !important; - overflow-wrap: break-word !important; - color: var(--ae-label-color) !important; -} - -ul { - margin: 0 !important; - list-style: none !important; -} - -ul.options li:hover { - background: var(--ae-input-color) !important; - color: var(--ae-input-bg-color) !important; -} - -ul.options li.selected { - background: var(--ae-panel-bg-color) !important; - color: var(--ae-label-color) !important; - pointer-events: none; -} - -ul.options li span { - display: none !important; -} - -/* [id$="2img_override_settings"] .token span { - top: 0px !important; -} -[id$="2img_override_settings"] div > input, [id$="2img_override_settings"] .token + div > input { - min-height: 22px !important; -} -.wrap-inner.svelte-a6vu2r.svelte-a6vu2r.svelte-a6vu2r { - gap: 0; - padding: 0; -} */ - -div.token { - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-input-bg-color) !important; - border: 1px solid var(--ae-input-border-color) !important; - padding: 3px !important; - margin: 1px; - padding-top: 4px !important; - color: var(--ae-input-color) !important; -} - -div.token-remove { - fill: var(--ae-label-color) !important; - border-radius: var(--radius-full) !important; - background: var(--ae-input-border-color) !important; - border: 1px solid var(--ae-input-border-color) !important; - /*border-radius: var(--ae-panel-border-radius);*/ -} - -.block.gradio-accordion { - background-color: var(--ae-main-bg-color) !important; - /*padding-bottom: 0 !important;*/ -} - -.block.gradio-accordion:hover { - border-color: var(--ae-primary-color) !important; -} - -.block.gradio-accordion .label-wrap { - margin: calc(-1px + var(--ae-inside-padding-size) * -1); - width: auto; - padding: var(--ae-accordion-vertical-padding) - var(--ae-accordion-horizontal-padding); - border-radius: var(--ae-panel-border-radius); - line-height: var(--ae-accordion-line-height); - color: var(--ae-label-color); - padding-left: max(8px, var(--ae-accordion-horizontal-padding)); - padding-right: max(8px, var(--ae-accordion-horizontal-padding)); - /*pointer-events: none !important;*/ -} - -.tab-nav { - padding: 4px 4px 0; -} -#extras_params, -#extras_metadata { - padding: 0px 4px 4px !important; -} - -#pnginfo_html2_info > div > b { - color: var(--ae-primary-color); - text-transform: capitalize; -} - -.block.gradio-accordion .hide + .open.label-wrap { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.block.gradio-accordion .label-wrap.open { - margin-bottom: var(--ae-inside-padding-size); - /*margin-bottom:0;*/ -} - -.block.gradio-accordion > .gap.svelte-vt1mxs > div:first-child { - margin-top: calc(var(--ae-inside-padding-size) * 2) !important; -} - -[id$="2img_extra_networks_row"].aside .gap.svelte-vt1mxs > div:first-child { - margin-top: 0 !important; -} - -#extras_resize_mode { - flex-wrap: nowrap; -} - -/* [id$="_subdirs"] select{ - width:100%; - background-color:var(--ae-input-bg-color); - border: 1px solid var(--ae-input-border-color); - outline:0 !important; -} -[id$="_subdirs"]{ - margin-bottom: var(--ae-inside-padding-size)!important; -} */ - -.block.gradio-accordion:hover .label-wrap { - color: var(--ae-main-bg-color) !important; - background-color: var(--ae-primary-color) !important; -} - -.block.gradio-accordion > div.wrap { - pointer-events: none !important; - cursor: pointer; - width: auto !important; - height: var(--ae-accordion-header-height) !important; - z-index: 1; - left: 0 !important; - top: 0 !important; - opacity: 0 !important; -} - -.form > .gradio-row > .form { - border: 0 !important; -} - -.padded { - padding: var(--ae-inside-padding-size) !important; -} - -.gradio-row, -.gap { - gap: var(--ae-outside-gap-size) !important; -} - -button.tool { - max-width: 34px; - min-height: 34px; - min-width: 34px !important; -} - -div.block.padded { - /*box-shadow: var(--block-shadow);*/ - border-width: var(--ae-border-width); - border-color: var(--ae-panel-border-color); - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-panel-bg-color); - /*width: 100%; - line-height: var(--line-sm);*/ -} - -fieldset.block.padded { - background-color: var(--ae-panel-bg-color) !important; - /*border-width: var(--ae-border-width) !important;*/ - /*border-color: var(--ae-panel-border-color) !important;*/ - border-radius: var(--ae-panel-border-radius) !important; -} - -div.svelte-b6y5bg, -div.gradio-row > .form { - /*box-shadow: var(--block-shadow);*/ - border-width: var(--ae-border-width) !important; - border-color: var(--ae-panel-border-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-panel-border-color) !important; - box-shadow: none !important; - /*width: 100%; - line-height: var(--line-sm);*/ -} - -.block.gradio-dropdown, -.block.gradio-slider, -.block.gradio-checkbox, -.block.gradio-textbox, -.block.gradio-radio, -.block.gradio-checkboxgroup, -.block.gradio-number, -.block.gradio-colorpicker { - border-width: 0; - box-shadow: none !important; -} - -.gradio-dropdown input { - margin: 0 !important; -} - -.block.gradio-dropdown span.single-select { - color: var(--ae-input-color) !important; -} - -.dropdown-arrow.svelte-p5edak { - fill: var(--ae-input-color) !important; -} - -.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, -.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, -button.tool.secondary, -button.secondary, -.gradio-dropdown label .wrap, -input[type="text"], -input[type="password"], -input[type="email"], -textarea, -input[type="number"] { - outline: none !important; - box-shadow: none !important; - border: 1px solid var(--ae-input-border-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-input-bg-color) !important; - color: var(--ae-input-color) !important; - text-align: left !important; - min-width: unset; -} - -button.tool.secondary, -button.secondary { - text-align: center !important; -} - -.gradio-container-3-31-0 .prose * { - color: var(--ae-label-color); -} - -.gradio-container-3-23-0 .prose code { - background-color: var(--ae-panel-bg-color); - border-radius: var(--ae-panel-bg-color); - border: 1px solid var(--ae-panel-border-color); - padding: 0 !important; - margin: 0 !important; - white-space: break-spaces !important; -} - -.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, -.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, -.gradio-container-3-31-0 [type="text"], -.gradio-container-3-31-0 [type="email"], -.gradio-container-3-31-0 [type="url"], -.gradio-container-3-31-0 [type="password"], -.gradio-container-3-31-0 [type="number"], -.gradio-container-3-31-0 [type="date"], -.gradio-container-3-31-0 [type="datetime-local"], -.gradio-container-3-31-0 [type="month"], -.gradio-container-3-31-0 [type="search"], -.gradio-container-3-31-0 [type="tel"], -.gradio-container-3-31-0 [type="time"], -.gradio-container-3-31-0 [type="week"], -.gradio-container-3-31-0 [multiple], -.gradio-container-3-31-0 textarea, -.gradio-container-3-31-0 select { - line-height: 1.5rem; - padding: 4px 8px; -} - -.gradio-container-3-31-0 [type="checkbox"], -.gradio-container-3-31-0 [type="radio"] { - background-color: var(--ae-input-bg-color); - border: 1px solid var(--ae-input-border-color); - border-radius: var(--ae-panel-border-radius); -} - -.gradio-container-3-31-0 [type="checkbox"]:checked, -.gradio-container-3-31-0 [type="radio"]:checked { - background-color: var(--ae-primary-color); -} - -.gradio-slider input[type="number"] { - padding-right: 2px !important; - max-height: 24px !important; - width: 64px !important; - margin-bottom: var(--ae-inside-padding-size); -} - -.no-slider-layout .gradio-slider input[type="range"] { - display: none; -} -.no-slider-layout .gradio-slider input[type="number"] { - width: 100% !important; - margin-bottom: 0; - min-height: 34px; - padding-right: 8px !important; -} -.no-slider-layout .head.svelte-1cl284s { - flex-direction: column; -} -[id*="2img_toprow"] > div:first-child { - min-width: unset !important; -} -.no-slider-layout [id$="2img_settings"] { - min-width: min(420px, 100%) !important; -} - -.no-slider-layout div.block.padded.gradio-slider { - align-content: stretch; -} -[id*="2img_checkboxes"] > .form > div { - min-width: unset !important; - white-space: nowrap; -} -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70 { - align-self: flex-start; - margin-top: 2px; -} -.thumbnail-small.svelte-g4rw9 > img.svelte-g4rw9 { - object-fit: contain; - max-height: 54px !important; -} -.thumbnail-small.svelte-g4rw9.svelte-g4rw9 { - width: auto; - max-height: 56px; - max-width: 180px; -} -.no-slider-layout [id$="2img_res_switch_btn"] { - height: 34px; - align-self: flex-end; - margin-bottom: var(--ae-inside-padding-size) !important; -} -.no-slider-layout [id$="2img_dimensions_row"] > .form { - background-color: var(--ae-panel-bg-color) !important; -} - -.gradio-dropdown:not(.multiselect) .wrap-inner { - padding: 0px 5px !important; - height: 32px !important; -} - -fieldset span, -label > span { - color: var(--ae-label-color) !important; -} - -.gradio-radio label > span { - color: var(--ae-input-color) !important; -} - -input[type="number"], -input[type="text"], -input[type="password"], -input[type="email"], -textarea { - height: 34px !important; -} - -.gradio-slider input[type="range"] { - align-self: flex-start; -} - -span.svelte-1gfkn6j:not(.has-info) { - margin-top: 1px; - margin-left: 1px; - margin-bottom: var(--ae-inside-padding-size); -} - -/* input column alignment */ -label.block { - display: flex; - justify-content: space-between; - flex-direction: column; - min-height: 100%; -} - -div.block.padded.gradio-slider { - display: flex; - flex-wrap: wrap; - align-content: space-between; -} - -/* checkbox container */ -.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, -.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - gap: var(--ae-inside-padding-size); -} - -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:hover, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:focus { - border-color: var(--ae-input-focus-color); - background-image: var(--radio-circle); - background-color: var(--ae-primary-color); -} - -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked, -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:hover, -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:focus, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:hover, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:focus { - border-color: var(--ae-input-focus-color); - background-image: var(--checkbox-check); - background-color: var(--ae-primary-color); -} - -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - box-shadow: none; - border: 1px solid var(--ae-input-border-color); - border-radius: var(--ae-panel-border-radius); - background-color: var(--ae-input-bg-color); - line-height: var(--line-sm); -} - -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:hover, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:hover, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:hover { - border-color: var(--ae-input-focus-color); - background-color: var(--ae-input-bg-color); -} - -label.svelte-1p9xokt > .svelte-1p9xokt + .svelte-1p9xokt, -label.svelte-1qxcj04 > .svelte-1qxcj04 + .svelte-1qxcj04 { - margin-right: var(--size-1); -} - -input.svelte-56zyyb { - background: none; -} - -.gradio-colorpicker label.block { - flex-direction: row; -} - -/* -.gradio-slider input[type=number] { - align-self: self-end; -} -*/ -.gradio-dropdown.multiselect .wrap-inner { - padding: 0 !important; - margin: 0 !important; - gap: 0 !important; - min-height: 32px; -} - -[id$="2img_styles_row"].gradio-column > .form { - flex-wrap: nowrap; - flex-direction: row; - border: 0; -} - -[id$="2img_styles"] { - padding: 0 !important; -} - -[id$="2img_styles"] label { - flex-direction: row; - display: flex; - flex-grow: 1; - background-color: var(--ae-main-bg-color) !important; -} - -[id$="2img_styles"] label .wrap { - flex-grow: 1; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - margin-right: -2px; -} - -[id$="2img_styles"] label > span { - padding-right: 5px; - margin-bottom: 0 !important; -} - -[id$="2img_token_counter"].block, -[id$="2img_negative_token_counter"].block { - position: absolute !important; - text-align: right; - z-index: 99; -} - -[id$="2img_actions_column"] { - flex-grow: 0 !important; - flex-direction: column !important; - min-width: unset !important; -} - -[id$="2img_tools"] > .form.svelte-b6y5bg { - background: 0 !important; - border: 0 !important; -} - -[id$="2img_prompt"], -[id$="2img_neg_prompt"] { - padding: 0 !important; - border: 0 !important; - background: 0; -} - -[id$="2img_token_counter"].block, -[id$="2img_negative_token_counter"].block, -[id$="2img_prompt"] label span, -[id$="2img_neg_prompt"] label span { - padding: 4px !important; - margin: 0 !important; -} - -[id$="2img_prompt"] textarea, -[id$="2img_neg_prompt"] textarea { - margin: -1px; - width: calc(100% + 2px); -} - -/*frame*/ -.compact.svelte-vt1mxs, -.panel.svelte-vt1mxs { - border: solid var(--ae-panel-border-width) var(--ae-panel-border-color); - border-radius: var(--ae-panel-border-radius); - background: var(--ae-panel-bg-color); - padding: var(--ae-outside-gap-size); - background: var(--ae-frame-bg-color); -} - -.compact.svelte-15lo0d8 { - border-radius: var(--ae-panel-border-radius); - background: var(--ae-panel-border-color); - padding: 0; - gap: 1px !important; -} - -[id$="-collapse"], -[id$="-collapse-one"] > div { - border: 0 !important; - margin: 0 !important; - padding: 0 !important; - border-radius: 0 !important; - background-color: transparent !important; - overflow: visible !important; - outline: 0 !important; -} - -[id$="-collapse-one"] > div.form { - background: 0 !important; -} - -[id$="-collapse-one"] > div.form > div { - padding: 0 !important; -} - -[id^="row_setting_"] { - gap: 0px !important; -} - -[id^="row_setting_"] > div + div.form { - flex-grow: 0; - min-width: unset; -} - -[id*="2img_seed_row"] label { - flex-direction: row; -} - -[id$="2img_seed"] label span { - margin-bottom: 0 !important; - margin-right: 8px !important; - align-self: center; -} - -[id$="2img_group_seed"] { - gap: 0 !important; -} - -[id$="2img_subseed_show"] label { - margin-top: 6px; -} - -#subseed_show_box-collapse-all { - margin-left: -1px; - min-width: unset; - flex-grow: 0; -} - -div.svelte-15lo0d8 > .form > * { - min-width: min(100px, 100%); -} - -label { - pointer-events: none !important; -} - -label > * { - pointer-events: all; -} - -span.ml-2 { - margin-left: 0 !important; - padding-left: var(--size-2); -} - -/* gradio preloader*/ -.svelte-j1gjts { - pointer-events: none !important; - width: 5px !important; - height: 5px !important; - background-color: var(--ae-primary-color) !important; - top: 2px !important; - left: 2px !important; -} - -.svelte-j1gjts > * { - display: none !important; -} - -/* [id$="-collapse-all"] div:not([class*="input"]) -{ - border:none !important; - margin:0!important; - padding:0!important; - border-radius:0!important; - background-color:transparent!important; - outline: 0 !important; -} */ - -#txtimg_hr_finalres { - min-height: 0 !important; - outline: 0; - position: absolute; - margin-top: 2px; - margin-left: 60px; -} - -#txtimg_hr_finalres .resolution { - font-weight: bold; -} - -#txt2img_hr_upscaler { - max-width: 100%; -} - -#txtimg_hr_finalres .prose.gradio-html { - padding: var(--ae-inside-padding-size) !important; -} - -.gradio-container-3-31-0 .prose { - min-height: unset !important; -} - -#header-top > .gradio-row:not(#nav_menu, #nav_menu_header_tabs) { - margin-left: max(4px, var(--ae-outside-gap-size)); -} - -#header-top { - gap: 1px !important; -} - -[id$="_prompt_image"] + div { - gap: 1px !important; -} - -[id*="2img_toprow"], -[id*="2img_toprow"] .gap { - gap: 1px !important; -} - -.script-group, -[id*="_sub-group"] { - padding: var(--ae-inside-padding-size) !important; - background-color: var(--ae-subgroup-bg-color) !important; - border-radius: var(--ae-panel-border-radius); - border: 1px solid var(--ae-subpanel-border-color) !important; - margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); - padding-bottom: calc(var(--ae-inside-padding-size) + 2px) !important; -} - -.script-group > div, -[id*="_sub-group"] > div { - border-radius: var(--ae-subpanel-border-radius); -} - -.script-group div.block, -[id*="_sub-group"] div.block { - background-color: var(--ae-subpanel-bg-color) !important; - border: 0px solid var(--ae-subpanel-border-color) !important; - border-radius: var(--ae-subpanel-border-radius) !important; - margin: 0px; -} - -.script-group fieldset.block.padded, -.script-group div.gradio-row > .form, -[id*="_sub-group"] div.gradio-row > .form { - background-color: var(--ae-subpanel-bg-color) !important; - border-radius: var(--ae-subpanel-border-radius) !important; -} - -.script-group div.svelte-b6y5bg, -.script-group div.gradio-row > .form, -[id*="_sub-group"] div.gradio-row > .form { - border: 0; - padding: 1px; - background: var(--ae-subpanel-border-color) /*transparent*/ !important; - gap: 1px !important; - margin: 0px; - border-radius: var(--ae-subpanel-border-radius) !important; -} - -[id*="_sub-group"] div.gradio-row > .form { - border: 0; - padding: 0px; -} - -.compact.svelte-15lo0d8, -.panel.svelte-15lo0d8 { - border-radius: var(--ae-panel-border-radius); - background: var(--ae-panel-bg-color); - padding: 0; - gap: 1px !important; -} - -.script-group .compact, -.script-group .gradio-column { - gap: 1px !important; - padding: 0; -} - -.script-group button.secondary, -.script-group .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, -.script-group .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, -.script-group input[type="checkbox"], -.script-group input[type="radio"] { - border-radius: var(--ae-subpanel-border-radius) !important; -} - -.script-group div.block.gradio-html { - background: transparent !important; -} - -.script-group input[type="number"], -.script-group input[type="range"], -.script-group textarea, -.script-group button.tool.secondary, -[id*="_sub-group"] button.tool.secondary, -[id*="_sub-group"] input:not(.border-none) { - border-radius: var(--ae-subpanel-border-radius) !important; - border: 1px solid var(--ae-subgroup-input-border-color) !important; - background: var(--ae-subgroup-input-bg-color) !important; - color: var(--ae-subgroup-input-color) !important; -} - -.script-group button.tool.secondary:hover, -button.tool.secondary:hover, -[id*="_sub-group"] button.tool.secondary:hover { - background: var(--ae-icon-color) !important; - /*color: var(--ae-subgroup-input-color)!important;*/ -} - -#png_2img_results button.secondary:hover, -[id^="image_buttons_"] button.secondary:hover { - background: var(--ae-icon-color) !important; - color: var(--ae-icon-hover-color) !important; -} - -.script-group > div.gradio-row, -[id*="_sub-group"] > div.gradio-row { - gap: 1px !important; - border: 1px solid var(--ae-subpanel-border-color) !important; - margin: -1px; - background: var(--ae-subpanel-border-color) !important; - border-radius: var(--ae-subpanel-border-radius) !important; - /* padding: var(--ae-inside-padding-size); */ - position: relative; - left: 1px; - top: 1px; -} - -[id*="_sub-group"] div.gradio-row:not(:last-child) > .form { - /*margin-bottom: 1px;*/ -} - -.script-group + div.form, -[id*="_group_"] + div.form { - margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); -} - -[id$="-collapse-all"] div:not([class*="wrap"]) { - border: none !important; - margin: 0 !important; - padding: 0 !important; - border-radius: 0 !important; - background-color: transparent !important; - outline: 0 !important; -} - -[id*="_sub-group"] [id$="-collapse-all"] > div.form { - background-color: transparent !important; -} - -.script-group .gradio-dropdown label .wrap, -[id*="_sub-group"] .gradio-dropdown label .wrap { - border-radius: var(--ae-subpanel-border-radius) !important; - background: var(--ae-subgroup-input-bg-color) !important; - border-color: var(--ae-subgroup-input-border-color) !important; -} - -.script-group .gradio-dropdown label .wrap span, -[id*="_sub-group"] .gradio-dropdown label .wrap span { - color: var(--ae-subgroup-input-color) !important; -} - -.script-group .dropdown-arrow, -[id*="_sub-group"] .dropdown-arrow { - fill: var(--ae-subgroup-input-color) !important; -} - -[id*="_controls_sub-group"] { - border: 0 !important; - padding-left: 0 !important; - padding-right: 0 !important; - padding-bottom: 2px !important; -} - -.script-alwayson-group .gradio-html + .form { - padding-top: 1px; -} - -#mode_img2img > .form { - border: 0 !important; -} - -[id$="-collapse"] button, -[id$="-collapse-one"] button, -[id$="-collapse-all"] button { - align-self: flex-end; -} - -[id$="-collapse"] fieldset, -[id$="-collapse-one"] fieldset, -[id$="-collapse-all"] fieldset { - padding: 0; -} - -.block.gradio-file, -.block.gradio-image { - border-radius: 0; - background: var(--ae-input-bg-color); - border-color: var(--ae-input-border-color); -} - -.gradio-tabs { - background-color: var(--ae-main-bg-color); - padding: var(--ae-inside-padding-size); - border-radius: var(--ae-panel-border-radius); -} - -.gradio-accordion .gradio-tabs { - padding: 0; -} - -#img2img_dimensions_row{ - min-width:unset !important; - max-width:34px; -} - -[id$="2img_detect_image_size_btn"], -[id$="2img_res_switch_btn"] { - margin: -1px !important; -} - -#dim_controls > div:nth-child(2) { - margin-top: -1px !important; - margin-bottom: -1px !important; -} - -/***************************/ -/* Generate Interrupt Skip */ -/***************************/ -.gradio-button.generate-box-skip, -.gradio-button.generate-box-interrupt { - display: none; -} - -button.secondary, -button.primary { - border: 1px solid var(--ae-input-border-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-input-bg-color) !important; - color: var(--ae-input-color) !important; -} - -button.secondary:hover, -button.primary:hover { - background: var(--ae-primary-color) !important; - color: var(--ae-input-bg-color) !important; -} - -[id$="_generate"], -[id$="2img_settings"] > button:first-child { - min-height: var(--ae-generate-button-height); -} - -button[id$="_generate_forever"] { - flex-grow: 0; - min-width: unset; -} - -button[id$="_generate_forever"].active { - background: var(--ae-primary-color) !important; - color: var(--ae-input-bg-color) !important; -} - -button[id$="_generate_forever"].active:before { - background: var(--ae-icon-hover-color) !important; -} - -[id$="_interrupt"].secondary, -[id$="_skip"].secondary { - min-height: var(--ae-generate-button-height); - background-color: var(--ae-input-bg-color); - /* - position: absolute; - width: 50%; - height: 100%; - */ - display: none; -} - -[id$="_interrupt"].secondary:hover, -[id$="_skip"].secondary:hover { - background-color: var(--ae-cancel-color) !important; -} - -[id$="2img_generate_box"] { - position: relative; -} - -[id$="_interrupt"] { - left: 0; -} - -[id$="_skip"] { - right: 0; -} - -[id$="2img_generate_box"] button { - display: flex; -} - -.inactive { - opacity: 0.5; -} - -.performance { - font-size: 0.85em; - color: var(--ae-primary-color) !important; -} - -.performance p { - display: inline-block; -} - -.performance .time { - margin-right: 0; -} - -/***************************/ -/* Context Menu */ -/***************************/ - -.image-buttons button { - min-width: auto; -} - -.infotext { - overflow-wrap: break-word; -} - -#img2img_unused_scale_by_slider { - visibility: hidden; - width: 0.5em; - max-width: 0.5em; - min-width: 0.5em; -} - -/* settings */ - -.context-menu-items a:hover { - color: var(--ae-nav-bg-color); - background-color: var(--ae-primary-color); -} - -.context-menu-items { - list-style: none; - margin: 0; - padding: 0; -} - -.context-menu-items a { - display: block; - padding: 5px; - cursor: pointer; -} - -/**********************/ -/* splitter and views */ -/**********************/ - -[id$="2img_settings"]::before { - pointer-events: none; - content: ""; - position: absolute; - z-index: 999; - height: calc( - var(--ae-container-height-gap) - var(--ae-generate-button-height) - ); - top: calc( - var(--ae-generate-button-height) + (var(--ae-outside-gap-size) * 2) - ); - left: 0; - bottom: 0; - width: 100%; - background: linear-gradient( - 0deg, - var(--ae-main-bg-color), - transparent 0%, - transparent 99%, - var(--ae-main-bg-color) 100% - ); -} - -[id$="2img_settings"] { - min-width: min(490px, 100%) !important; - flex: 1 1 0%; - /*display: block !important;*/ -} - -[id$="2img_settings_scroll"] { - /* need to calculate this */ - height: calc( - var(--ae-container-height-gap) - var(--ae-generate-button-height) - - (var(--ae-outside-gap-size)) - ); - overflow-y: auto !important; - overflow-x: hidden; - /*margin-top: var(--ae-outside-gap-size);*/ - /*padding-left: 1px; - padding-right: 1px;*/ - margin: 0; - padding-top: var(--ae-outside-gap-size) !important; -} - -[id$="_prompt_image"] + div { - flex-wrap: nowrap; -} - -[id$="2img_settings"] { - flex-grow: 1; - flex-shrink: 0; - /*overflow-x: auto;*/ - flex-basis: 50%; -} - -[id$="2img_results"] { - flex-grow: 0 !important; - flex-shrink: 1 !important; - flex-basis: 50%; -} - -[id$="_splitter"] { - flex-grow: 0 !important; - flex-shrink: 0 !important; - /* background-color: var(--ae-input-bg-color); */ - cursor: col-resize; - margin: 0 0 0 auto; - min-width: 1px !important; - max-width: 1px !important; - align-self: stretch; - /*border: 1px dashed var(--ae-input-bg-color);*/ - padding: 0px 2px !important; - background-image: linear-gradient( - 0deg, - var(--ae-input-bg-color), - var(--ae-input-bg-color) 60%, - transparent 60%, - transparent 100% - ); - background-size: 1px 5px; - background-repeat-x: no-repeat; - background-position: 2px; - border: none; -} - -#tabs [id$="2img_results"] { - flex: 1 1 50%; -} - -/***********/ -/* PngInfo */ -/***********/ - -[id$="png_2img_settings"]::before { - display: none; -} - -[id$="png_2img_settings_scroll"] { - padding: 0 !important; - height: calc(100vh - 170px); -} - -[id$="png_2img_settings_scroll"] div[data-testid="image"] img { - max-height: unset !important; -} - -#pnginfo_image div[data-testid="image"] > div { - max-height: calc(100vh - 175px) !important; - height: 100% !important; -} - -#pnginfo_image { - height: 100% !important; -} - -#pnginfo_image div[data-testid="image"] { - max-height: unset; - height: 100% !important; -} - -[id$="png_2img_results"] > div:nth-child(3) { - display: none; -} - -button.secondary { - min-height: 34px; - padding: 4px !important; -} - -.thumbnail-item { - box-shadow: none !important; - border: 1px solid var(--ae-panel-border-color) !important; - border-radius: 0 !important; - background: var(--ae-main-bg-color) !important; - aspect-ratio: unset !important; - overflow: visible !important; - object-fit: contain !important; -} - -.block.gradio-gallery.svelte-mppz8v { - background: var(--ae-main-bg-color); - border-color: var(--ae-panel-border-color); -} - -/*********/ -/* Train */ -/*********/ -[id$="png_2img_results"] > div:nth-child(3) { - display: none; -} - -[id$="train_tabs_2img_settings"]::before { - display: none; -} - -[id$="train_tabs_2img_settings"] .tabitem { - background-color: var(--ae-input-bg-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - padding: var(--ae-outside-gap-size) !important; - max-width: 100%; -} - -[id$="train_tabs_2img_settings"] > div:first-child { - margin: 0; - padding: 0; - width: calc(100vw - (var(--ae-container-padding) * 2) - 4px); -} - -[id$="train_tabs_2img_settings"] [id$="_2img_settings_scroll"] { - padding-top: 0 !important; - height: calc( - var(--ae-container-height-gap) - var(--ae-generate-button-height) - - (var(--ae-outside-gap-size)) + 50px - ); -} - -#ti_2img_splitter, -#ti_2img_results { - margin-top: 28px; - max-height: calc(var(--ae-container-height) - 28px); -} - -#ti_output { - padding: 0 !important; - border: 0; - background: 0; -} - -#ti_output label span { - display: none; -} - -#ti_error + div *:not(.progressDiv, .progress), -#ti_error + div { - background: transparent !important; - border: 0 !important; - padding: 4px 0; -} - -#ti_error, -#ti_output, -#ti_progress { - padding: 0 8px !important; -} - -#ti_gallery_container .livePreview { - height: calc(var(--ae-container-height-gap) - 150px) !important; -} - -#tabs, -#tabs_extensions, -#tab_settings, -#tab_settings .tabs, -[id$="train_tabs_2img_settings"] { - padding: 0 !important; -} - -#train_tabs_2img_settings .primary.gradio-button { - min-height: var(--ae-generate-button-height); -} - -#train_2img_settings_scroll .gradio-row.svelte-15lo0d8:not(:last-child) { - gap: 1px !important; -} - -[id^="train_process_"] { - min-width: 180px !important; -} - -.gradio-html, -#settings_result { - height: auto !important; - width: 100%; - color: var(--ae-primary-color); - padding: 0 !important; -} - -.block.svelte-mppz8v { - box-shadow: none; - border-color: var(--ae-panel-border-color); - border-radius: 0; - background: var(--ae-input-bg-color); -} - -#tabs { - flex-grow: 1; -} - -/******************/ -/* extra-network-cards */ -/******************/ - -[id$="2img_extra_networks_row"].aside { - position: fixed; - top: var(--ae-top-header-height); - width: 90%; - right: 0; - height: calc(100% - var(--ae-top-header-height)); - max-width: 50%; - min-width: 320px; - z-index: 9999; - transform: translateX(100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; - padding: calc(1rem - var(--ae-outside-gap-size)); - background-color: var(--ae-main-bg-color) !important; - display: block !important; -} - -[id$="2img_extra_networks_row"].aside.open { - transform: translateX(0); - box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; -} - -[id$="2img_extra_networks_row"].aside > div:first-child { - border: 0 !important; - padding-top: 0 !important; -} - -[id$="2img_extra_networks_row"].aside > div:first-child > div:first-child { - display: none; - border: 0; -} - -[id$="2img_extra_networks_row"].aside.\!hidden, -[id$="2img_extra_networks_row"].aside > div:first-child > div:last-child { - display: block !important; - padding-top: 0; -} - -[id$="2img_extra_close"] { - display: none; -} - -[id$="_subdirs"] button { - max-height: 34px; - margin-bottom: var(--ae-inside-padding-size) !important; -} - -[id$="2img_extra_networks_row"].aside .gradio-accordion > .label-wrap { - display: none !important; -} - -/* [id$="_subdirs"] { - margin-top: var(--ae-inside-padding-size) !important; -} */ -.extra-network-cards .nocards, -.extra-network-thumbs .nocards { - margin: 1.25em 0.5em 0.5em; -} - -.extra-network-cards .nocards h1, -.extra-network-thumbs .nocards h1 { - font-size: 1.5em; - margin-bottom: 1em; -} - -.extra-network-cards .nocards li, -.extra-network-thumbs .nocards li { - margin-left: 0.5em; -} - -.extra-networks div { - margin: 0; - padding: 0; - border: 0; -} - -.extra-networks > div:first-child > * { - margin-bottom: 0; -} - -.extra-networks .tabitem .block.gradio-html { - padding: 0 !important; -} - -.extra-networks .search, -[id$="2img_extra_refresh"], -[id$="2img_extra_close"] { - max-height: 32px; - margin-right: 4px; - border: 0; - flex-grow: 1; - padding-bottom: 0px !important; - min-height: 34px !important; -} - -.extra-networks .search { - width: 60%; -} - -.extra-networks [id$="2img_extra_clear"] { - position: relative; - border-radius: 50% !important; - margin-left: -25px !important; - margin-top: 8px; - right: 8px; - height: fit-content; -} - -.extra-networks + * { - display: none !important; -} - -.extra-network-cards { - display: grid; - /* grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); - overflow-y: auto; - scroll-snap-type: y mandatory; - */ - grid-gap: var(--ae-inside-padding-size); - - max-height: calc(var(--ae-extra-networks-height) * 1.33); - - grid-template-rows: repeat( - var(--ae-extra-networks-visible-rows), - calc(var(--ae-extra-networks-card-real-size) * 1.33) - ); - grid-auto-columns: var(--ae-extra-networks-card-real-size); - grid-auto-flow: column; - overflow-x: auto; - overflow-y: hidden; - scroll-snap-type: x mandatory; -} - -[id$="2img_extra_networks_row"].aside .extra-network-cards { - /*grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); */ - /*grid-template-columns: repeat(calc( var(--ae-extra-networks-card-size) * 4), calc( var(--ae-extra-networks-card-size) * 25%));*/ - grid-template-columns: repeat( - auto-fit, - minmax(calc(var(--ae-extra-networks-card-size) * 25%), 1fr) - ); - /* overflow-y: auto; */ - /* scroll-snap-type: y mandatory; */ - overflow-x: hidden; - grid-template-rows: auto; - grid-auto-flow: row; - max-height: unset; - /* max-height: calc(100vh - 230px); */ -} - -[id$="2img_extra_networks_row"].aside .tabitem { - overflow-y: auto; - overflow-x: hidden; - max-height: calc(100vh - 160px); - border-radius: 0; -} - -.extra-networks .tab-nav { - padding-bottom: var(--ae-inside-padding-size); -} - -.extra-network-cards .card { - position: relative; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - z-index: 1; - cursor: pointer; - border: 1px dashed var(--ae-panel-bg-color); - display: block !important; -} - -.extra-network-cards .card::after { - display: block; - content: ""; - padding-bottom: 133%; -} - -.extra-network-cards .card-container { - position: relative; -} - -.extra-network-cards .image-icon { - background-color: var(--ae-panel-border-color); - -webkit-mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; - position: absolute; - width: 24px; - height: 24px; - top: 50%; - left: 50%; - z-index: 0; - transform: translateX(-50%) translateY(-50%); -} - -.card-container .description { - display: none !important; -} - -.extra-network-cards .card .actions { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 0.5em; - - background: rgba(0, 0, 0, 0.5); - /*box-shadow: 0 0 .25em .25em rgba(0, 0, 0, .5);*/ - /*text-shadow: 0 0 .2em #000;*/ - text-shadow: none; - box-shadow: none; -} - -.extra-network-cards .card .actions:hover { - background-color: rgba(0, 0, 0, 0.5); -} - -.extra-network-cards .card .actions .name { - font-size: var(--ae-extra-networks-name-size); - font-weight: 700; - line-break: anywhere; - color: var(--ae-text-color); -} - -.extra-network-cards .card .actions:hover .additional { - display: block; -} - -.extra-network-cards .card ul { - margin: 0.25em 0 0.75em 0.25em; - cursor: unset; -} - -.extra-network-cards .card ul a { - cursor: pointer; -} - -.extra-network-cards .card .metadata-button:before, -.extra-network-thumbs .card .metadata-button:before { - content: "🛈"; -} - -.extra-network-cards .card .metadata-button, -.extra-network-thumbs .card .metadata-button { - display: none; - position: absolute; - right: 8px; - top: 8px; - color: white; - text-shadow: 2px 2px 3px black; - font-size: 22pt; -} - -.extra-network-cards .card:hover .metadata-button, -.extra-network-thumbs .card:hover .metadata-button { - display: inline-block; -} - -.extra-network-cards .card .metadata-button:hover, -.extra-network-thumbs .card .metadata-button:hover { - color: var(--ae-primary-color); -} - -.extra-network-cards .card { - overflow: hidden; -} - -.extra-network-cards .card img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - object-fit: cover; - width: 100%; - height: 100%; -} - -/************/ -/* MainTabs */ -/************/ -.tabitem { - background-color: var(--ae-main-bg-color) !important; - padding: 0 !important; - border: 0 !important; -} - -.tabs .border-b-2 { - border-color: var(--ae-input-bg-color); -} - -.tabs > div > button { - padding: 8px; - padding-top: 0; - padding-right: 10px; - padding-left: 0; - color: var(--ae-label-color); - border: 0; - opacity: 0.75; -} - -.tabs > div > button:hover { - color: var(--ae-label-color); - opacity: 1; -} - -.tabs > div > .selected { - background: transparent; - border: 0; - color: var(--ae-primary-color); -} - -#tabs > div:first-child > button.selected { - color: var(--ae-primary-color); -} - -/* offcanvas menu */ -#tabs > div:first-child { - position: fixed; - z-index: 10000; - display: block; - width: 90%; - height: 100%; - background-color: var(--ae-nav-bg-color) !important; - top: 0; - padding-top: var(--ae-top-header-height); - left: 0; - max-width: 320px; - transform: translateX(-100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0, 0, 0, 0)-30px 0 30px 30px; - overflow-y: auto; - overflow-x: hidden; -} - -#tabs > div:first-child.open { - transform: translateX(0); - box-shadow: rgba(0, 0, 0, 0.4)-30px 0 30px 30px; -} - -#tabs > div:first-child > button { - display: block; - width: 320px; - text-align: left; - background-color: transparent !important; - border-top: 2px !important; - border-bottom: 2px !important; - border-left: 0; - border-right: 0; - border-radius: 0 !important; - padding: 0px; - padding-left: 20px; - min-height: 37px; - color: var(--ae-nav-color); -} - -#tabs > div:first-child > button:hover { - background-color: var(--ae-primary-color) !important; - color: var(--ae-main-bg-color) !important; -} - -#tabs > div { - padding: 0; - border: 0; -} - -.tab-nav.svelte-1g805jl { - border: 0; - /*padding-bottom: var(--ae-inside-padding-size);*/ -} - -#dim_controls > div:first-child { - margin-bottom: max(7px, var(--ae-outside-gap-size)) !important; -} - -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - background-color: var(--ae-panel-bg-color); -} - -label.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, -label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - pointer-events: all !important; -} - -/*****************/ -/* Quicksettings */ -/*****************/ - -/* offcanvas quicksettings menu */ -#quicksettings_overflow { - position: fixed; - z-index: 9999; - display: block; - width: 90%; - background-color: var(--ae-main-bg-color) !important; - top: var(--ae-top-header-height); - bottom: 0px; - padding: 16px; - /*padding-top: 0px;*/ - right: 0; - max-width: 480px; - transform: translateX(100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; - overflow: hidden; - padding-top: 0; -} - -#quicksettings_overflow_container { - overflow-y: auto; - height: calc(100% - 45px); -} - -#quicksettings_overflow.open { - transform: translateX(0); - box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; -} - -#quicksettings_overflow > div { - margin-bottom: var(--ae-outside-gap-size); -} - -#quicksettings_actions > div { - background-color: transparent !important; - border: 0; -} - -#quicksettings_actions > div > div, -[id*="add2quick_"] { - min-width: unset !important; - flex-grow: 0 !important; - padding: 4px !important; - border: 1px solid var(--ae-panel-border-color) !important; -} - -#quicksettings_actions > div label, -[id*="add2quick_"] label { - display: block; - position: relative; - cursor: pointer; - line-height: 25px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - margin: auto !important; - padding: 0 !important; - min-width: 25px; - min-height: 25px; -} - -/* Hide the browser's default checkbox */ -#quicksettings_actions > div input, -[id*="add2quick_"] input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -/* Create a custom checkbox */ -#quicksettings_actions > div span, -[id*="add2quick_"] span { - position: absolute; - top: 0; - left: 0; - height: 25px; - width: 25px; - background-color: var(--ae-input-color); - padding: 0; - margin: 0 !important; - opacity: 0.5; -} - -[id*="add2quick_"] span { - -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; -} - -/* On mouse-over, add a grey background color */ -#quicksettings_draggable label input:checked ~ span, -#quicksettings_actions > div label:hover input ~ span, -[id*="add2quick_"] label:hover input ~ span { - background-color: var(--ae-icon-color); - opacity: 1; -} - -/* When the checkbox is checked, add a blue background */ - -[id*="add2quick_"] label input:checked ~ span { - -webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; - background-color: var(--ae-input-color); - opacity: 0.5; -} - -#quicksettings_draggable span { - -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; -} - -#quicksettings_sort_asc span { - -webkit-mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; -} - -#quicksettings_sort_desc span { - -webkit-mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; -} - -#quicksettings_overflow_container > div.marker-bottom:after, -#quicksettings_overflow_container > div.marker-top:before { - content: " "; - display: inline-block; - background-color: var(--ae-primary-color); - width: 100%; - height: 2px; - position: relative; - margin-top: calc((1px + (var(--ae-outside-gap-size) / 2)) * -1); -} - -#quicksettings_overflow_container > div.marker-bottom:after { - top: calc((var(--ae-outside-gap-size) / 2) - 1px); -} - -#quicksettings_overflow_container > div > div:nth-child(2), -[id$="settings_2img_settings"] > div > div:nth-child(2) { - flex-shrink: 1 !important; - flex-grow: 0 !important; - flex-basis: 0% !important; - min-width: unset; - position: relative; - margin-left: -1px; -} - -/* -#quicksettings_overflow_container > div:first-child { - margin-top: var(--ae-outside-gap-size); -} -*/ - -#quicksettings_overflow_container.no-scroll { - /*overflow:hidden; - width:100%;*/ -} - -/* #quicksettings_actions{ - margin-bottom:0 !important; -} */ - -#quicksettings_overflow_container > div.dragging { - opacity: 0.4 !important; -} - -[draggable="true"] [id*="add2quick_"] { - pointer-events: none; -} - -[draggable="true"] [id*="add2quick_"] label input:checked ~ span { - -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; - background-color: var(--ae-input-color); - opacity: 0.5; -} - -#quicksettings_actions > div label input:checked ~ span:after, -#quicksettings_actions > div label:hover input:checked ~ span, -[id*="add2quick_"] label:hover input:checked ~ span { - background-color: var(--ae-icon-color); - opacity: 1; -} - -/* Create the checkmark/indicator (hidden when not checked) */ -#quicksettings_actions > div label span:after, -[id*="add2quick_"] label span:after { - content: ""; - position: absolute; - display: none; -} - -/* Show the checkmark when checked */ -#quicksettings_actions > div label input:checked ~ span:after, -[id*="add2quick_"] label input:checked ~ span:after { - display: block; -} - -#ui_add2quick_setting_hidden_tabs, -[id*="add2quick_setting_quicksettings"] { - display: none; -} - -/****************/ -/* modelmerger */ -/****************/ -#modelmerger_models { - gap: 1px !important; -} - -#modelmerger_config_method { - margin: -1px; - width: auto; - margin-bottom: calc(var(--ae-outside-gap-size) * -1); -} - -/******************/ -/* extensions tab */ -/******************/ -#tabs_extensions .block { - padding: 0 !important; -} - -#tab_extensions table { - border-collapse: collapse; - width: 100%; -} - -#tab_extensions table td, -#tab_extensions table th { - padding: 0.25em 0.5em; - border: 1px solid var(--ae-panel-border-color); - overflow-wrap: anywhere; - min-width: 75px; -} -#tab_extensions table tr { - background-color: var(--ae-main-bg-color); -} -#tab_extensions table tr:nth-child(even) { - background-color: var(--ae-frame-bg-color); -} - -#tab_extensions table input[type="checkbox"] { - margin-right: 0.5em; - top: -3px; -} - -#tab_extensions table button { - max-width: 5em; - min-width: 5em; -} - -#extensions_installed_top div { - /*display: none;*/ -} - -#tab_extensions input[disabled="disabled"] { - opacity: 0.5; -} - -.extension-tag { - font-weight: 700; - font-size: 95%; -} - -#available_extensions .info { - margin: 0; -} - -#available_extensions .date_added { - opacity: 0.85; - font-size: 90%; -} - -/*************/ -/* settings */ -/*************/ -#audio_notification{ - visibility:hidden !important; - height:0 !important; -} - -input[type=checkbox]:checked { - background-color: var(--ae-primary-color) !important; -} - -#row_setting_quicksettings_list, -#row_setting_gradio_theme, -#row_setting_hidden_tabs -{ -display:none !important; -} -pre { - white-space: pre-wrap; - /* css-3 */ - white-space: -moz-pre-wrap; - /* Mozilla, since 1999 */ - white-space: -pre-wrap; - /* Opera 4-6 */ - white-space: -o-pre-wrap; - /* Opera 7 */ - word-wrap: break-word; - /* Internet Explorer 5.5+ */ -} - -[id$="settings_2img_settings"] { - max-height: calc(100vh - 245px); - overflow-y: auto; -} - -[id$="settings_2img_settings"]::before { - display: none; -} - -#settings_result { - height: auto !important; - width: 100%; - text-align: center; - color: var(--ae-primary-color); - min-height: unset; -} - -#settings_sd #row_setting_sd_model_checkpoint { - display: none; -} - -#settings { - display: block; -} - -#settings > div { - border: none; - margin-left: 10em; -} - -#settings > div.tab-nav { - float: left; - display: block; - margin-left: 0; - width: 12em; -} - -#settings > div.tab-nav button { - display: block; - border: none; - text-align: left; - white-space: initial; - height: 27px; - padding: 0px; - padding-right: 10px; - /* - width: 100%; - padding: 5px; - border: 1px solid var(--ae-frame-bg-color); - border-radius: 0; - border-top-left-radius: var(--ae-panel-border-radius); - border-bottom-left-radius: var(--ae-panel-border-radius); - */ -} - -#settings > div.tab-nav button.selected { - /*background: var(--ae-frame-bg-color);*/ - border-left: 2px solid; - border-radius: 0; - padding-left: 5px; -} - -.global-popup-inner { - top: 50px; - position: relative; - overflow-y: auto; - height: calc(100% - 50px); - width: 100%; -} - -.global-popup-close { - position: absolute; - right: 16px; - top: 16px; - width: 25px; - height: 25px; - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; -} - -.global-popup { - position: fixed; - z-index: 99999; - top: 0px; - left: 0px; - background: var(--ae-main-bg-color); - color: var(--ae-primary-color); - line-break: anywhere; - height: 100%; - width: 100%; - opacity: 0.98; -} - -@media only screen and (max-width: 860px) { - /* For tablets: */ - [id$="_splitter"] { - display: none !important; - } - - [id$="2img_settings_scroll"] { - height: auto !important; - } - - [id$="2img_results"] { - max-height: unset !important; - } - - [id$="2img_settings"]::before { - display: none; - } - - [id$="2img_actions_column"] { - flex-basis: 100% !important; - max-width: 100% !important; - } - - [id$="2img_settings_scroll"] { - padding-top: 0; - } - - .gr-block, - .dark .gr-block, - .gr-form, - #txt2img_seed, - #img2img_seed, - #txt2img_subseed, - #img2img_subseed, - #txt2img_seed_row > div, - #img2img_seed_row > div, - #txt2img_subseed_row > div, - #img2img_subseed_row > div { - min-width: 70px; - } - - [id$="2img_gallery"] { - margin-bottom: 0px; - } - - [id$="2img_tools"] { - gap: 2px; - } - - [id$="2img_results"] { - flex-grow: 1 !important; - flex-shrink: 1 !important; - overflow-x: hidden; - } - - #splitter { - display: none; - } - - [id$="2img_prompt_image"] + div { - flex-wrap: wrap; - } - - [id$="2img_results"] { - flex-grow: 1 !important; - } - - .token-counter span { - position: relative; - top: 3px; - right: 3px; - } - - #settings > div { - margin-left: 0; - } - - #settings > div.tab-nav { - float: none; - display: flex !important; - margin-left: 0; - width: auto; - margin-bottom: 8px; - } - - [id$="2img_hr_scale"] { - flex-basis: 100% !important; - } - - /* - [id$="2img_gallery"] div.modify-upload{ - position:absolute; - } - */ - - [id$="2img_gallery"], - [id$="2img_gallery"] div.preview.fixed-height > img, - [id$="2img_gallery"] .preview.fixed-height, - [id$="2img_gallery"] img + div.thumbnails { - position: relative !important; - height: auto !important; - min-height: auto; - border-radius: 0 !important; - } - - [id$="2img_gallery"], - [id$="2img_gallery"] div.preview.fixed-height > img, - [id$="2img_gallery"] .preview.fixed-height { - max-height: unset !important; - } - - [id$="2img_gallery"] div > img { - object-fit: contain; - } - - [id$="2img_gallery"] .preview.fixed-height, - [id$="2img_gallery"] .grid-wrap, - [id$="2img_gallery"] .empty { - min-height: auto !important; - } - - [id$="2img_gallery"] img + div.thumbnails { - height: 60px !important; - } - - .livePreview img { - object-position: top; - border-radius: 0 !important; - position: relative; - width: 100%; - } - - .livePreview.init, - .livePreview:not(.init) + div { - display: none; - } - - .livePreview { - /*width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; */ - max-height: unset !important; - /*bottom:60px;*/ - position: relative !important; - left: 0; - top: 0; - width: auto !important; - height: auto !important; - } - - div.svelte-10ogue4 > *:first-child.livePreview { - /*height: calc(100% - 60px - var(--ae-outside-gap-size) - 2px) !important;*/ - /*height: auto !important;*/ - } - - div.svelte-10ogue4 > *:first-child.livePreview > img { - /*height: auto !important;*/ - } - - [id$="png_2img_results"] { - order: 1; - } - - [id$="settings_2img_settings"] { - max-height: none; - } - - #nav_menu_header_tabs, - #tab_extensions td, - #tab_extensions th { - display: none !important; - } - - #tab_extensions td:nth-child(2), - #tab_extensions td:nth-child(2), - #tab_extensions th:nth-child(2), - #tab_extensions th:nth-child(2), - #tab_extensions td:nth-child(5), - #tab_extensions td:nth-child(5), - #tab_extensions th:nth-child(5), - #tab_extensions th:nth-child(5), - #tab_extensions td:first-child, - #tab_extensions td:last-child, - #tab_extensions th:first-child, - #tab_extensions th:last-child { - display: table-cell !important; - } - - #ti_2img_splitter, - #ti_2img_results { - margin-top: 0; - } - - #train_tabs_2img_settings > div:first-child { - width: 100%; - } - - #tab_ti .livePreview, - #tab_ti .livePreview.init { - min-height: unset !important; - } - - #ti_gallery_container { - max-height: unset !important; - } - - #ti_error, - #ti_output, - #ti_progress { - padding: 0 !important; - } -} - -/************/ -/* Footer */ -/************/ -.gradio-container.app { - min-height: 100vh !important; -} - -.main > .wrap > .contain { - flex-grow: 1; - display: flex; - flex-direction: column; -} - -footer { - display: none !important; -} - -#tabs + div { - position: relative; - z-index: 999; - padding: 0px !important; -} - -.footer-wrapper { - display: flex; -} - -.footer-links { - position: relative; - width: 100%; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -} - -.footer-links > li { - display: inline-block; - width: 32px; - height: 32px; - text-align: center; - float: left; - border-radius: 100%; - position: relative; - display: flex; - margin: 0 !important; -} - -.footer-links > li > div, -.footer-links > li > a { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - fill: var(--ae-primary-color); -} - -.footer-links > li:last-child { - position: absolute; - top: 0; - right: 0; -} - -a:hover, -a:visited, -a { - color: var(--ae-primary-color) !important; - text-decoration: none !important; -} - -a:hover { - color: var(--ae-primary-color) !important; - text-decoration: underline !important; -} - -/************/ -/* Tooltips */ -/************/ - -a[data-tooltip].top:before, -a[data-tooltip].top:after { - transform: translateY(10px); -} - -a[data-tooltip].top:hover:after, -a[data-tooltip].top:hover:before { - transform: translateY(0px); -} - -a[data-tooltip].right:before, -a[data-tooltip].right:after { - transform: translateX(0px); -} - -a[data-tooltip].right:hover:after, -a[data-tooltip].right:hover:before { - transform: translateX(10px); -} - -a[data-tooltip].bottom:before, -a[data-tooltip].bottom:after { - transform: translateY(-10px); -} - -a[data-tooltip].bottom:hover:after, -a[data-tooltip].bottom:hover:before { - transform: translateY(0px); -} - -a[data-tooltip].left:before, -a[data-tooltip].left:after { - transform: translateX(0px); -} - -a[data-tooltip].left:hover:after, -a[data-tooltip].left:hover:before { - transform: translateX(-10px); -} - -a[data-tooltip] { - position: relative; - max-width: 320px; -} - -a[data-tooltip]:after, -a[data-tooltip]:before { - position: absolute; - visibility: hidden; - opacity: 0; - transition: transform 200ms ease, opacity 200ms; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - z-index: 99; -} - -a[data-tooltip]:before { - content: attr(data-tooltip); - background-color: var(--ae-main-bg-color); - /*color: #fff;*/ - font-size: 10px; - font-weight: bold; - padding: 10px 15px; - border-radius: 5px; - white-space: nowrap; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 1px; -} - -a[data-tooltip]:after { - width: 0; - height: 0; - border: 6px solid transparent; - content: ""; -} - -a[data-tooltip]:hover:after, -a[data-tooltip]:hover:before { - visibility: visible; - opacity: 1; - transform: translateY(0px); -} - -a[data-tooltip][data-position="top"]:before { - bottom: 100%; - left: -130%; - margin-bottom: 10px; -} - -a[data-tooltip][data-position="top"]:after { - border-top-color: var(--ae-main-bg-color); - border-bottom: none; - bottom: 101%; - left: calc(50% - 6px); - margin-bottom: 4px; -} - -a[data-tooltip][data-position="left"]:before { - top: -12%; - right: 100%; - margin-right: 10px; -} - -a[data-tooltip][data-position="left"]:after { - border-left-color: var(--ae-main-bg-color); - border-right: none; - top: calc(50% - 3px); - right: 100%; - margin-top: -6px; - margin-right: 4px; -} - -a[data-tooltip][data-position="right"]:before { - top: -5%; - left: 100%; - margin-left: 10px; -} - -a[data-tooltip][data-position="right"]:after { - border-right-color: var(--ae-main-bg-color); - border-left: none; - top: calc(50% - 6px); - left: calc(100% + 4px); -} - -a[data-tooltip][data-position="bottom"]:before { - top: 100%; - left: -130%; - margin-top: 10px; -} - -a[data-tooltip][data-position="bottom"]:after { - border-bottom-color: var(--ae-main-bg-color); - border-top: none; - top: 100%; - left: 5px; - margin-top: 4px; -} - -.tooltip-html { - text-align: left; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transform-origin: 0 0; -} - -.tooltip-html i { - position: relative; - display: block; -} - -.tooltip-html .icon-info { - fill: var(--ae-primary-color); - scale: 0.9; -} - -li.coffee-circle { - /*background: #FFDD00;*/ - margin-left: 5px; - margin-right: 5px; -} - -.coffee-circle .tooltip-html .top { - width: 220px; - max-width: 220px; - text-align: left; - padding: 16px; -} - -li.coffee-circle p { - color: var(--ae-text-color); - float: inherit; - padding: 0; - font-size: 14px; - line-height: 16px !important; - /*text-align: justify;*/ - padding-bottom: 4px; -} -li.coffee-circle p b { - color: var(--ae-primary-color) !important; - font-weight: normal; -} -.coffee-circle .tooltip-html .top > svg, -.coffee-circle .tooltip-html .top > img { - /*float: left; - margin-right: 5px;*/ - margin: auto; - margin-bottom: 8px; - /*width: 60%;*/ -} -.coffee-circle .tooltip-html .top blockquote { - background: var(--ae-frame-bg-color); - padding: 10px; - quotes: "\201C""\201D""\2018""\2019"; - border: 0; - margin: 8px 0 !important; -} -.coffee-circle .tooltip-html .top blockquote:before { - opacity: 0.5; - content: open-quote; - font-size: 3em; - line-height: 0.1em; - margin-right: 0.15em; - vertical-align: -0.4em; -} -.coffee-circle .tooltip-html .top blockquote p { - display: inline; -} - -.coffee svg path { - fill: var(--ae-primary-color) !important; -} - -.tooltip-html .coffee { - fill: var(--ae-main-bg-color); -} - -.tooltip-html .top { - min-width: 200px; - max-width: 400px; - top: -20px; - left: 50%; - transform: translate(-90%, -100%); - padding: 10px 20px; - background-color: var(--ae-main-bg-color); - font-weight: normal; - font-size: 14px; - border-radius: var(--ae-panel-border-radius); - position: absolute; - z-index: 99; - box-sizing: border-box; - box-shadow: 0 1px 8px rgb(0 0 0 / 50%); - display: none; -} - -.tooltip-html .top.center { - transform: translate(-50%, -100%); -} - -.tooltip-html:hover .top { - display: block; -} - -.tooltip-html .top i { - position: absolute; - top: 100%; - left: 90%; - margin-left: -15px; - width: 30px; - height: 15px; - overflow: hidden; -} - -.tooltip-html .top.center i { - left: 50%; -} - -.tooltip-html .top i::after { - content: ""; - position: absolute; - width: 15px; - height: 15px; - left: 50%; - transform: translate(-50%, -50%) rotate(45deg); - background-color: var(--ae-main-bg-color); - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); -} - -.tooltip-html span { - opacity: 0.5; -} - -.tooltip-html a { - color: var(--ae-primary-color); -} - -/**********************/ -/* Sliders Scrollbars */ -/**********************/ - -::-webkit-scrollbar { - width: 10px; -} - -[id$="2img_settings_scroll"]::-webkit-scrollbar { - width: 12px; -} - -::-webkit-scrollbar-track { - box-shadow: inset 0 0 10px 10px var(--ae-main-bg-color); -} - -::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 10px 10px var(--ae-panel-bg-color); -} - -::-webkit-scrollbar-button { - display: none; -} - -::-webkit-scrollbar-thumb, -::-webkit-scrollbar-track { - border-left: solid 6px var(--ae-main-bg-color); - border-radius: 0; -} - -[id$="2img_settings_scroll"]::-webkit-scrollbar-thumb, -[id$="2img_settings_scroll"]::-webkit-scrollbar-track { - border-left: solid 8px var(--ae-frame-bg-color); -} - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - input[type="range"] { - overflow: hidden; - width: 100%; - -webkit-appearance: none; - background-color: var(--ae-input-bg-color); - border: 1px solid var(--ae-input-border-color); - position: relative; - border-radius: var(--ae-panel-border-radius); - } - - input[type="range"]::after { - content: ""; - position: absolute; - height: 13px; - background-image: var(--ae-slider-bg-overlay); - opacity: 0.15; - width: 100%; - } - - input[type="range"]::-webkit-slider-runnable-track { - height: 14px; - -webkit-appearance: none; - color: var(--ae-primary-color); - margin-top: -1px; - } - - input[type="range"]::-webkit-slider-thumb { - width: 0px; - -webkit-appearance: none; - height: 14px; - cursor: ew-resize; - background-color: var(--ae-primary-color); - box-shadow: -1024px 0 0 1024px var(--ae-primary-color); - } - - [id$="_sub-group"] input[type="range"] { - background-color: var(--ae-subgroup-input-bg-color); - border: 1px solid var(--ae-subgroup-input-border-color); - } -} - -/* Firefox */ - -input[type="range"]::-moz-range-progress { - background-color: var(--ae-primary-color); - height: 14px; - border: 1px solid var(--ae-primary-color); -} - -input[type="range"]::-moz-range-track { - background-color: var(--ae-input-bg-color); -} - -input[type=range]::after { - content: ""; - position: absolute; - height: 13px; - background-image: var(--ae-slider-bg-overlay); - opacity: 0.15; - width: 100%; -} - -#quicksettings_overflow_container, -#theme_overflow_container, -[id$="2img_checkpoints_cards"], -[id$="2img_results"], -[id$="2img_settings_scroll"] { - scrollbar-color: var(--ae-panel-bg-color) var(--ae-main-bg-color) !important; - scrollbar-width: thin !important; - /*padding: 0 1px;*/ -} - -input[type="range"] { - width: 100%; -} - -input[type="range"]::-moz-range-track { - width: 100%; - background-color: var(--ae-input-bg-color); - border: none; - border-radius: 0px; - - position: relative; - height: 100%; - background-image: var(--ae-slider-bg-overlay); - opacity: 0.15; - width: 100%; -} - -input[type="range"]::-moz-range-thumb { - border: 0px solid var(--ae-primary-color); - width: 0px; - border-radius: 0%; - background-color: var(--ae-primary-color); -} - -/*hide the outline behind the border*/ -input[type="range"]:-moz-focusring { - outline: 1px solid var(--ae-primary-color); - outline-offset: -1px; -} - -input[type="range"]:focus::-moz-range-track { - background-color: var(--ae-input-bg-color); -} - -input[type="number"] { - -moz-appearance: textfield; -} - -input[type="number"]:hover, -input[type="number"]:focus { - -moz-appearance: initial; -} - -/* IE maybe later */ - -input[type="range"]::-ms-fill-lower { - background-color: var(--ae-primary-color); -} - -input[type="range"]::-ms-fill-upper { - background-color: var(--ae-input-bg-color); -} - -/*****************/ -/* img2img fixes */ -/*****************/ -#img2img_scale_resolution_row .form { - background: transparent !important; - border: 0 !important; -} - -#img2img_unused_scale_by_slider { - display: none !important; -} - -.center.boundedheight.flex { - width: 100% !important; - height: auto !important; - max-height: 50vh; -} - -.image-container img.absolute-img { - position: relative !important; -} - -.image-container img { - max-height: 50vh !important; -} - -.image-container { - min-height: 25vh !important; - height: auto !important; - display: flex; -} - -.absolute-img.svelte-rlgzoo { - position: relative; - opacity: 0; -} - -.block.gradio-image { - height: auto !important; -} - -div[data-testid="image"] canvas { - width: auto !important; - height: 100% !important; - position: absolute !important; - top: 0 !important; - left: 0 !important; - border: 0 !important; -} - -#imageARPreview { - position: absolute; - top: 0; - left: 0; - outline: 2px solid red; - background: rgba(255, 0, 0, 0.3); - z-index: 900; - pointer-events: none; - display: none; -} - -#tab_img2img div.center.boundedheight.flex { - display: block !important; -} - -/*************/ -/* Spotlight */ -/*************/ - -[id^="spotlight"] .no-point-events { - pointer-events: none; -} - -[id^="spotlight"] .move { - cursor: move; -} - -[id^="spotlight"] .z-50, -[id^="spotlight"] .block-hidden { - display: none; -} - -[id^="spotlight"] div { - border: 0; -} - -[id^="spotlight"] { - position: fixed; - top: 0px; - left: 0px; - bottom: 0px; - width: 100%; - z-index: 99999; - color: #fff; - background-color: var(--ae-modal-bg-color); - opacity: 0; - overflow: hidden; - user-select: none; - transition: opacity 0.2s ease-out; - font-family: Arial, sans-serif; - font-size: 16px; - font-weight: 400; - contain: strict; - touch-action: none; - pointer-events: none; -} - -[id^="spotlight"].show { - opacity: 1; - transition: none; - pointer-events: auto; -} - -[id^="spotlight"].relative { - position: relative !important; - width: auto; - height: calc(50vh + 40px); - z-index: 99; - margin-bottom: 1px; - padding-top: 40px; -} - -[id^="spotlight"].relative .spl-pane { - top: -20px; -} - -[id^="spotlight"].relative .spl-pane > * { - position: relative; -} - -[id^="spotlight"].relative .spl-close { - display: none; -} - -[id^="spotlight"].relative .spl-page { - display: none; -} - -[id^="spotlight"].white { - color: #212529; - background-color: #fff; -} - -[id^="spotlight"].white .spl-spinner, -[id^="spotlight"].white .spl-prev, -[id^="spotlight"].white .spl-next, -[id^="spotlight"].white .spl-page ~ * { - filter: invert(1); -} - -[id^="spotlight"].white .spl-progress { - background-color: rgba(0, 0, 0, 0.35); -} - -[id^="spotlight"].white .spl-header, -[id^="spotlight"].white .spl-footer { - background-color: rgba(255, 255, 255, 0.65); -} - -[id^="spotlight"].white .spl-button { - background: #212529; - color: #fff; -} - -[id^="spotlight"] .cover { - object-fit: cover; - height: 100%; - width: 100%; -} - -[id^="spotlight"] .contain { - object-fit: contain; - height: 100%; - width: 100%; -} - - -[id^="spotlight"] .autofit { - object-fit: none; - width: auto; - height: auto; - max-height: none; - max-width: none; - transition: none; -} - -.spl-track { - position: absolute; - width: 100%; - height: 100%; - contain: strict; -} - -.spl-spinner { - position: absolute; - width: 100%; - height: 100%; - background-position: center; - background-repeat: no-repeat; - background-size: 42px; - opacity: 0; -} - -.spl-spinner.spin { - background-image: url("./file=html/svg/spotlight/preloader.svg"); - transition: opacity 0.2s linear 0.25s; - opacity: 1; -} - -.spl-spinner.error { - background-image: url("./file=html/svg/spotlight/error.svg"); - background-size: 128px; - transition: none; - opacity: 0.5; -} - -.spl-scene { - position: absolute; - width: 100%; - height: 100%; - transition: transform 0.65s cubic-bezier(0.1, 1, 0.1, 1); - contain: layout size; - will-change: transform; -} - -.spl-pane > * { - position: absolute; - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - left: 50%; - top: 50%; - margin: 0; - padding: 0; - border: 0; - transform: translate(-50%, -50%) scale(1); - transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1), opacity 0.65s ease; - contain: layout style; - will-change: transform, opacity; - visibility: hidden; -} - -.spl-pane { - position: absolute; - top: 0; - width: 100%; - height: 100%; - transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1); - contain: layout size; - will-change: transform, contents; -} - -.spl-pane.hide img { - display: none !important; -} - -.spl-pane.hide { - background-size: 100%; - transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important; - will-change: background-size !important; - transform: translate(0, 0) !important; -} - -.spl-header { - position: absolute; - top: 0; - width: 100%; - height: 40px; - text-align: right; - background-color: rgba(0, 0, 0, 0.85); - transform: translateY(-100px); - transition: transform 0.35s ease; - overflow: hidden; - will-change: transform; -} - -[id^="spotlight"].menu .spl-header, -.spl-header:hover { - transform: translateY(0); -} - -.spl-header div { - display: inline-block; - vertical-align: middle; - white-space: nowrap; - width: 40px; - height: 40px; - opacity: 0.5; - display: flex; - align-items: center; -} - -.spl-progress { - position: absolute; - top: 0; - left: -1px; - width: 100%; - height: 3px; - background-color: var(--ae-modal-icon-color); - transform: translateX(-100%); - transition: transform linear; -} - -.spl-footer { - position: absolute; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.45); - line-height: 20px; - padding: 20px 20px 0 20px; - padding-bottom: env(safe-area-inset-bottom, 0); - text-align: left; - font-size: 15px; - font-weight: 400; - transform: translateY(100%); - transition: transform 0.35s ease; - will-change: transform; -} - -[id^="spotlight"].menu .spl-footer, -.spl-footer:hover { - transform: translateY(0); -} - -.spl-title { - font-size: 22px; - margin-bottom: 20px; -} - -.spl-description { - margin-bottom: 20px; -} - -.spl-button { - display: inline-block; - background: #fff; - color: #000; - border-radius: 5px; - padding: 10px 20px; - margin-bottom: 20px; - cursor: pointer; -} - -.spl-page { - float: left; - width: auto; - line-height: 40px; -} - -.spl-page ~ * { - background-position: center; - background-repeat: no-repeat; - background-size: 21px; - float: right; -} - -.spl-fullscreen { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; -} - -.spl-fullscreen.on { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% - 50%; - mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% 50%; +body{ + background-color:transparent; } - -.spl-autofit { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; -} - -.spl-zoom-out { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-zoom-in { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-download { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; - background-size: 20px; -} - -.spl-theme { - background-image: url("./file=html/svg/spotlight/theme.svg"); -} - -.spl-play { - background-image: url("./file=html/svg/spotlight/play.svg"); -} - -.spl-play.on { - background-image: url("./file=html/svg/spotlight/pause.svg"); - animation: pulsate 1s ease infinite; -} - -.spl-close { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; -} - -.spl-like { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-like.on { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; -} - -.spl-tile { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-tile.on { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; -} - -.spl-undo { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-clear { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; - background-size: 22px; - position: absolute; - left: 0; -} - -.spl-pan { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-pan.on { - opacity: 1; -} - -.spl-draw { - background-color: var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; - background-size: 22px; -} - -.spl-color input { - width: 42px; - height: 42px; - padding: 5px 6px; - background: transparent; - margin-top: -1px; -} - -.spl-brush { - width: 100px !important; - margin-top: 0px; -} - -.spl-prev, -.spl-next { - position: absolute; - top: 50%; - left: 20px; - width: 50px; - height: 50px; - opacity: 0.65; - background-color: rgba(0, 0, 0, 0.45); - border-radius: 100%; - cursor: pointer; - margin-top: -25px; - transform: translateX(-100px); - transition: transform 0.35s ease; - background-image: url("./file=html/svg/spotlight/arrow.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: 30px; - will-change: transform; -} - -.spl-next { - left: auto; - right: 20px; - transform: translateX(100px) scaleX(-1); -} - -[id^="spotlight"].menu .spl-prev { - transform: translateX(0); -} - -[id^="spotlight"].menu .spl-next { - transform: translateX(0) scaleX(-1); -} - -@media (hover: hover) { - .spl-page ~ div { - cursor: pointer; - transition: opacity 0.2s ease; - } - - .spl-page ~ div:hover, - .spl-prev:hover, - .spl-next:hover { - opacity: 1; - } -} - -@media (max-width: 500px) { - .spl-header div { - width: 32px; - } - - .spl-footer .spl-title { - font-size: 20px; - } - - .spl-footer { - font-size: 14px; - } - - .spl-prev, - .spl-next { - width: 35px; - height: 35px; - margin-top: -17.5px; - background-size: 15px 15px; - } - - .spl-spinner { - background-size: 30px 30px; - } - - .spl-brush { - width: 60px !important; - padding-left: 10px; - } - - .spl-fullscreen { - display: inline-block !important; - } -} - -.hide-scrollbars { - overflow: hidden !important; -} - -@keyframes pulsate { - 0% { - opacity: 1; - } - - 50% { - opacity: 0.2; - } - - 100% { - opacity: 1; - } -} - /*BREAKPOINT_CSS_CONTENT*/ \ No newline at end of file diff --git a/test/conftest.py b/test/conftest.py index 0723f62a..31a5d9ea 100644 --- a/test/conftest.py +++ b/test/conftest.py @@ -1,17 +1,25 @@ import os import pytest -from PIL import Image -from gradio.processing_utils import encode_pil_to_base64 +import base64 + test_files_path = os.path.dirname(__file__) + "/test_files" +def file_to_base64(filename): + with open(filename, "rb") as file: + data = file.read() + + base64_str = str(base64.b64encode(data), "utf-8") + return "data:image/png;base64," + base64_str + + @pytest.fixture(scope="session") # session so we don't read this over and over def img2img_basic_image_base64() -> str: - return encode_pil_to_base64(Image.open(os.path.join(test_files_path, "img2img_basic.png"))) + return file_to_base64(os.path.join(test_files_path, "img2img_basic.png")) @pytest.fixture(scope="session") # session so we don't read this over and over def mask_basic_image_base64() -> str: - return encode_pil_to_base64(Image.open(os.path.join(test_files_path, "mask_basic.png"))) + return file_to_base64(os.path.join(test_files_path, "mask_basic.png")) diff --git a/webui-macos-env.sh b/webui-macos-env.sh index 6354e73b..24bc5c42 100644 --- a/webui-macos-env.sh +++ b/webui-macos-env.sh @@ -12,8 +12,6 @@ fi export install_dir="$HOME" export COMMANDLINE_ARGS="--skip-torch-cuda-test --upcast-sampling --no-half-vae --use-cpu interrogate" export TORCH_COMMAND="pip install torch==2.0.1 torchvision==0.15.2" -export K_DIFFUSION_REPO="https://github.com/brkirch/k-diffusion.git" -export K_DIFFUSION_COMMIT_HASH="51c9778f269cedb55a4d88c79c0246d35bdadb71" export PYTORCH_ENABLE_MPS_FALLBACK=1 #################################################################### diff --git a/webui-user.bat b/webui-user.bat index e5a257be..b719b209 100644 --- a/webui-user.bat +++ b/webui-user.bat @@ -3,6 +3,6 @@ set PYTHON= set GIT= set VENV_DIR= -set COMMANDLINE_ARGS= +set COMMANDLINE_ARGS= --api --medvram-sdxl call webui.bat diff --git a/webui.py b/webui.py index d960f39d..12328423 100644 --- a/webui.py +++ b/webui.py @@ -1,374 +1,41 @@ from __future__ import annotations import os -import sys import time -import importlib -import signal -import re -import warnings -import json -from threading import Thread -from typing import Iterable - -from fastapi import FastAPI -from fastapi.middleware.cors import CORSMiddleware -from fastapi.middleware.gzip import GZipMiddleware -from packaging import version - -import logging - -# We can't use cmd_opts for this because it will not have been initialized at this point. -log_level = os.environ.get("SD_WEBUI_LOG_LEVEL") -if log_level: - log_level = getattr(logging, log_level.upper(), None) or logging.INFO - logging.basicConfig( - level=log_level, - format='%(asctime)s %(levelname)s [%(name)s] %(message)s', - datefmt='%Y-%m-%d %H:%M:%S', - ) - -logging.getLogger("torch.distributed.nn").setLevel(logging.ERROR) # sshh... -logging.getLogger("xformers").addFilter(lambda record: 'A matching Triton is not available' not in record.getMessage()) from modules import timer +from modules import initialize_util +from modules import initialize + startup_timer = timer.startup_timer startup_timer.record("launcher") -import torch -import pytorch_lightning # noqa: F401 # pytorch_lightning should be imported after torch, but it re-enables warnings on import so import once to disable them -warnings.filterwarnings(action="ignore", category=DeprecationWarning, module="pytorch_lightning") -warnings.filterwarnings(action="ignore", category=UserWarning, module="torchvision") -startup_timer.record("import torch") +initialize.imports() -import gradio # noqa: F401 -startup_timer.record("import gradio") - -from modules import paths, timer, import_hook, errors, devices # noqa: F401 -startup_timer.record("setup paths") - -import ldm.modules.encoders.modules # noqa: F401 -startup_timer.record("import ldm") - -from modules import extra_networks -from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, queue_lock # noqa: F401 - -# Truncate version number of nightly/local build of PyTorch to not cause exceptions with CodeFormer or Safetensors -if ".dev" in torch.__version__ or "+git" in torch.__version__: - torch.__long_version__ = torch.__version__ - torch.__version__ = re.search(r'[\d.]+[\d]', torch.__version__).group(0) - -from modules import shared, sd_samplers, upscaler, extensions, localization, ui_tempdir, ui_extra_networks, config_states -import modules.codeformer_model as codeformer -import modules.face_restoration -import modules.gfpgan_model as gfpgan -import modules.img2img - -import modules.lowvram -import modules.scripts -import modules.sd_hijack -import modules.sd_hijack_optimizations -import modules.sd_models -import modules.sd_vae -import modules.sd_unet -import modules.txt2img -import modules.script_callbacks -import modules.textual_inversion.textual_inversion -import modules.progress - -import modules.ui -from modules import modelloader -from modules.shared import cmd_opts -import modules.hypernetworks.hypernetwork - -startup_timer.record("other imports") - - -if cmd_opts.server_name: - server_name = cmd_opts.server_name -else: - server_name = "0.0.0.0" if cmd_opts.listen else None - - -def fix_asyncio_event_loop_policy(): - """ - The default `asyncio` event loop policy only automatically creates - event loops in the main threads. Other threads must create event - loops explicitly or `asyncio.get_event_loop` (and therefore - `.IOLoop.current`) will fail. Installing this policy allows event - loops to be created automatically on any thread, matching the - behavior of Tornado versions prior to 5.0 (or 5.0 on Python 2). - """ - - import asyncio - - if sys.platform == "win32" and hasattr(asyncio, "WindowsSelectorEventLoopPolicy"): - # "Any thread" and "selector" should be orthogonal, but there's not a clean - # interface for composing policies so pick the right base. - _BasePolicy = asyncio.WindowsSelectorEventLoopPolicy # type: ignore - else: - _BasePolicy = asyncio.DefaultEventLoopPolicy - - class AnyThreadEventLoopPolicy(_BasePolicy): # type: ignore - """Event loop policy that allows loop creation on any thread. - Usage:: - - asyncio.set_event_loop_policy(AnyThreadEventLoopPolicy()) - """ - - def get_event_loop(self) -> asyncio.AbstractEventLoop: - try: - return super().get_event_loop() - except (RuntimeError, AssertionError): - # This was an AssertionError in python 3.4.2 (which ships with debian jessie) - # and changed to a RuntimeError in 3.4.3. - # "There is no current event loop in thread %r" - loop = self.new_event_loop() - self.set_event_loop(loop) - return loop - - asyncio.set_event_loop_policy(AnyThreadEventLoopPolicy()) - - -def check_versions(): - if shared.cmd_opts.skip_version_check: - return - - expected_torch_version = "2.0.0" - - if version.parse(torch.__version__) < version.parse(expected_torch_version): - errors.print_error_explanation(f""" -You are running torch {torch.__version__}. -The program is tested to work with torch {expected_torch_version}. -To reinstall the desired version, run with commandline flag --reinstall-torch. -Beware that this will cause a lot of large files to be downloaded, as well as -there are reports of issues with training tab on the latest version. - -Use --skip-version-check commandline argument to disable this check. - """.strip()) - - expected_xformers_version = "0.0.20" - if shared.xformers_available: - import xformers - - if version.parse(xformers.__version__) < version.parse(expected_xformers_version): - errors.print_error_explanation(f""" -You are running xformers {xformers.__version__}. -The program is tested to work with xformers {expected_xformers_version}. -To reinstall the desired version, run with commandline flag --reinstall-xformers. - -Use --skip-version-check commandline argument to disable this check. - """.strip()) - - -def restore_config_state_file(): - config_state_file = shared.opts.restore_config_state_file - if config_state_file == "": - return - - shared.opts.restore_config_state_file = "" - shared.opts.save(shared.config_filename) - - if os.path.isfile(config_state_file): - print(f"*** About to restore extension state from file: {config_state_file}") - with open(config_state_file, "r", encoding="utf-8") as f: - config_state = json.load(f) - config_states.restore_extension_config(config_state) - startup_timer.record("restore extension config") - elif config_state_file: - print(f"!!! Config state backup not found: {config_state_file}") - - -def validate_tls_options(): - if not (cmd_opts.tls_keyfile and cmd_opts.tls_certfile): - return - - try: - if not os.path.exists(cmd_opts.tls_keyfile): - print("Invalid path to TLS keyfile given") - if not os.path.exists(cmd_opts.tls_certfile): - print(f"Invalid path to TLS certfile: '{cmd_opts.tls_certfile}'") - except TypeError: - cmd_opts.tls_keyfile = cmd_opts.tls_certfile = None - print("TLS setup invalid, running webui without TLS") - else: - print("Running with TLS") - startup_timer.record("TLS") - - -def get_gradio_auth_creds() -> Iterable[tuple[str, ...]]: - """ - Convert the gradio_auth and gradio_auth_path commandline arguments into - an iterable of (username, password) tuples. - """ - def process_credential_line(s) -> tuple[str, ...] | None: - s = s.strip() - if not s: - return None - return tuple(s.split(':', 1)) - - if cmd_opts.gradio_auth: - for cred in cmd_opts.gradio_auth.split(','): - cred = process_credential_line(cred) - if cred: - yield cred - - if cmd_opts.gradio_auth_path: - with open(cmd_opts.gradio_auth_path, 'r', encoding="utf8") as file: - for line in file.readlines(): - for cred in line.strip().split(','): - cred = process_credential_line(cred) - if cred: - yield cred - - -def configure_sigint_handler(): - # make the program just exit at ctrl+c without waiting for anything - def sigint_handler(sig, frame): - print(f'Interrupted with signal {sig} in {frame}') - os._exit(0) - - if not os.environ.get("COVERAGE_RUN"): - # Don't install the immediate-quit handler when running under coverage, - # as then the coverage report won't be generated. - signal.signal(signal.SIGINT, sigint_handler) - - -def configure_opts_onchange(): - shared.opts.onchange("sd_model_checkpoint", wrap_queued_call(lambda: modules.sd_models.reload_model_weights()), call=False) - shared.opts.onchange("sd_vae", wrap_queued_call(lambda: modules.sd_vae.reload_vae_weights()), call=False) - shared.opts.onchange("sd_vae_as_default", wrap_queued_call(lambda: modules.sd_vae.reload_vae_weights()), call=False) - shared.opts.onchange("temp_dir", ui_tempdir.on_tmpdir_changed) - shared.opts.onchange("gradio_theme", shared.reload_gradio_theme) - shared.opts.onchange("cross_attention_optimization", wrap_queued_call(lambda: modules.sd_hijack.model_hijack.redo_hijack(shared.sd_model)), call=False) - startup_timer.record("opts onchange") - - -def initialize(): - fix_asyncio_event_loop_policy() - validate_tls_options() - configure_sigint_handler() - check_versions() - modelloader.cleanup_models() - configure_opts_onchange() - - modules.sd_models.setup_model() - startup_timer.record("setup SD model") - - codeformer.setup_model(cmd_opts.codeformer_models_path) - startup_timer.record("setup codeformer") - - gfpgan.setup_model(cmd_opts.gfpgan_models_path) - startup_timer.record("setup gfpgan") - - initialize_rest(reload_script_modules=False) - - -def initialize_rest(*, reload_script_modules=False): - """ - Called both from initialize() and when reloading the webui. - """ - sd_samplers.set_samplers() - extensions.list_extensions() - startup_timer.record("list extensions") - - restore_config_state_file() - - if cmd_opts.ui_debug_mode: - shared.sd_upscalers = upscaler.UpscalerLanczos().scalers - modules.scripts.load_scripts() - return - - modules.sd_models.list_models() - startup_timer.record("list SD models") - - localization.list_localizations(cmd_opts.localizations_dir) - - with startup_timer.subcategory("load scripts"): - modules.scripts.load_scripts() - - if reload_script_modules: - for module in [module for name, module in sys.modules.items() if name.startswith("modules.ui")]: - importlib.reload(module) - startup_timer.record("reload script modules") - - modelloader.load_upscalers() - startup_timer.record("load upscalers") - - modules.sd_vae.refresh_vae_list() - startup_timer.record("refresh VAE") - modules.textual_inversion.textual_inversion.list_textual_inversion_templates() - startup_timer.record("refresh textual inversion templates") - - modules.script_callbacks.on_list_optimizers(modules.sd_hijack_optimizations.list_optimizers) - modules.sd_hijack.list_optimizers() - startup_timer.record("scripts list_optimizers") - - modules.sd_unet.list_unets() - startup_timer.record("scripts list_unets") - - def load_model(): - """ - Accesses shared.sd_model property to load model. - After it's available, if it has been loaded before this access by some extension, - its optimization may be None because the list of optimizaers has neet been filled - by that time, so we apply optimization again. - """ - - shared.sd_model # noqa: B018 - - if modules.sd_hijack.current_optimizer is None: - modules.sd_hijack.apply_optimizations() - - Thread(target=load_model).start() - - Thread(target=devices.first_time_calculation).start() - - shared.reload_hypernetworks() - startup_timer.record("reload hypernetworks") - - ui_extra_networks.initialize() - ui_extra_networks.register_default_pages() - - extra_networks.initialize() - extra_networks.register_default_extra_networks() - startup_timer.record("initialize extra networks") - - -def setup_middleware(app): - app.middleware_stack = None # reset current middleware to allow modifying user provided list - app.add_middleware(GZipMiddleware, minimum_size=1000) - configure_cors_middleware(app) - app.build_middleware_stack() # rebuild middleware stack on-the-fly - - -def configure_cors_middleware(app): - cors_options = { - "allow_methods": ["*"], - "allow_headers": ["*"], - "allow_credentials": True, - } - if cmd_opts.cors_allow_origins: - cors_options["allow_origins"] = cmd_opts.cors_allow_origins.split(',') - if cmd_opts.cors_allow_origins_regex: - cors_options["allow_origin_regex"] = cmd_opts.cors_allow_origins_regex - app.add_middleware(CORSMiddleware, **cors_options) +initialize.check_versions() def create_api(app): from modules.api.api import Api + from modules.call_queue import queue_lock + api = Api(app, queue_lock) return api def api_only(): - initialize() + from fastapi import FastAPI + from modules.shared_cmd_options import cmd_opts + + initialize.initialize() app = FastAPI() - setup_middleware(app) + initialize_util.setup_middleware(app) api = create_api(app) - modules.script_callbacks.app_started_callback(None, app) + from modules import script_callbacks + script_callbacks.before_ui_callback() + script_callbacks.app_started_callback(None, app) print(f"Startup time: {startup_timer.summary()}.") api.launch( @@ -379,38 +46,46 @@ def api_only(): def webui(): + from modules.shared_cmd_options import cmd_opts + launch_api = cmd_opts.api - initialize() + initialize.initialize() + + from modules import shared, ui_tempdir, script_callbacks, ui, progress, ui_extra_networks while 1: if shared.opts.clean_temp_dir_at_start: ui_tempdir.cleanup_tmpdr() startup_timer.record("cleanup temp dir") - modules.script_callbacks.before_ui_callback() + script_callbacks.before_ui_callback() startup_timer.record("scripts before_ui_callback") - shared.demo = modules.ui.create_ui() + shared.demo = ui.create_ui() startup_timer.record("create ui") if not cmd_opts.no_gradio_queue: - shared.demo.queue(concurrency_count=16) - else: - print('Server queues disabled') - shared.demo.progress_tracking = False + shared.demo.queue(64) - gradio_auth_creds = list(get_gradio_auth_creds()) or None + gradio_auth_creds = list(initialize_util.get_gradio_auth_creds()) or None + + auto_launch_browser = False + if os.getenv('SD_WEBUI_RESTARTING') != '1': + if shared.opts.auto_launch_browser == "Remote" or cmd_opts.autolaunch: + auto_launch_browser = True + elif shared.opts.auto_launch_browser == "Local": + auto_launch_browser = not any([cmd_opts.listen, cmd_opts.share, cmd_opts.ngrok, cmd_opts.server_name]) app, local_url, share_url = shared.demo.launch( share=cmd_opts.share, - server_name=server_name, + server_name=initialize_util.gradio_server_name(), server_port=cmd_opts.port, ssl_keyfile=cmd_opts.tls_keyfile, ssl_certfile=cmd_opts.tls_certfile, ssl_verify=cmd_opts.disable_tls_verify, debug=cmd_opts.gradio_debug, auth=gradio_auth_creds, - inbrowser=cmd_opts.autolaunch and os.getenv('SD_WEBUI_RESTARTING') != '1', + inbrowser=auto_launch_browser, prevent_thread_lock=True, allowed_paths=cmd_opts.gradio_allowed_path, app_kwargs={ @@ -420,9 +95,6 @@ def webui(): root_path=f"/{cmd_opts.subpath}" if cmd_opts.subpath else "", ) - # after initial launch, disable --autolaunch for subsequent restarts - cmd_opts.autolaunch = False - startup_timer.record("gradio launch") # gradio uses a very open CORS policy via app.user_middleware, which makes it possible for @@ -431,10 +103,10 @@ def webui(): # running its code. We disable this here. Suggested by RyotaK. app.user_middleware = [x for x in app.user_middleware if x.cls.__name__ != 'CORSMiddleware'] - setup_middleware(app) + initialize_util.setup_middleware(app) - modules.progress.setup_progress_api(app) - modules.ui.setup_ui_api(app) + progress.setup_progress_api(app) + ui.setup_ui_api(app) if launch_api: create_api(app) @@ -444,7 +116,7 @@ def webui(): startup_timer.record("add APIs") with startup_timer.subcategory("app_started_callback"): - modules.script_callbacks.app_started_callback(shared.demo, app) + script_callbacks.app_started_callback(shared.demo, app) timer.startup_record = startup_timer.dump() print(f"Startup time: {startup_timer.summary()}.") @@ -467,18 +139,23 @@ def webui(): shared.demo.close() break + # disable auto launch webui in browser for subsequent UI Reload + os.environ.setdefault('SD_WEBUI_RESTARTING', '1') + print('Restarting UI...') shared.demo.close() time.sleep(0.5) startup_timer.reset() - modules.script_callbacks.app_reload_callback() + script_callbacks.app_reload_callback() startup_timer.record("app reload callback") - modules.script_callbacks.script_unloaded_callback() + script_callbacks.script_unloaded_callback() startup_timer.record("scripts unloaded callback") - initialize_rest(reload_script_modules=True) + initialize.initialize_rest(reload_script_modules=True) if __name__ == "__main__": + from modules.shared_cmd_options import cmd_opts + if cmd_opts.nowebui: api_only() else: diff --git a/webui.sh b/webui.sh index d2636de7..3d0f87ee 100755 --- a/webui.sh +++ b/webui.sh @@ -38,7 +38,7 @@ fi # Name of the subdirectory (defaults to stable-diffusion-webui) if [[ -z "${clone_dir}" ]] then - clone_dir="stable-diffusion-webui-ux" + clone_dir="stable-diffusion-webui" fi # python3 executable @@ -141,8 +141,9 @@ case "$gpu_info" in *"Navi 2"*) export HSA_OVERRIDE_GFX_VERSION=10.3.0 ;; *"Navi 3"*) [[ -z "${TORCH_COMMAND}" ]] && \ - export TORCH_COMMAND="pip install --pre torch==2.1.0.dev-20230614+rocm5.5 torchvision==0.16.0.dev-20230614+rocm5.5 --index-url https://download.pytorch.org/whl/nightly/rocm5.5" - # Navi 3 needs at least 5.5 which is only on the nightly chain + export TORCH_COMMAND="pip install --pre torch torchvision --index-url https://download.pytorch.org/whl/nightly/rocm5.6" + # Navi 3 needs at least 5.5 which is only on the nightly chain, previous versions are no longer online (torch==2.1.0.dev-20230614+rocm5.5 torchvision==0.16.0.dev-20230614+rocm5.5 torchaudio==2.1.0.dev-20230614+rocm5.5) + # so switch to nightly rocm5.6 without explicit versions this time ;; *"Renoir"*) export HSA_OVERRIDE_GFX_VERSION=9.0.0 printf "\n%s\n" "${delimiter}" @@ -187,7 +188,7 @@ else printf "\n%s\n" "${delimiter}" printf "Clone stable-diffusion-webui" printf "\n%s\n" "${delimiter}" - "${GIT}" clone https://github.com/anapnoe/stable-diffusion-webui-ux.git "${clone_dir}" + "${GIT}" clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git "${clone_dir}" cd "${clone_dir}"/ || { printf "\e[1m\e[31mERROR: Can't cd to %s/%s/, aborting...\e[0m" "${install_dir}" "${clone_dir}"; exit 1; } fi @@ -245,7 +246,7 @@ while [[ "$KEEP_GOING" -eq "1" ]]; do printf "Launching launch.py..." printf "\n%s\n" "${delimiter}" prepare_tcmalloc - "${python_cmd}" "${LAUNCH_SCRIPT}" "$@" + "${python_cmd}" -u "${LAUNCH_SCRIPT}" "$@" fi if [[ ! -f tmp/restart ]]; then