diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index d80b24e2..cf6a2be8 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -26,7 +26,7 @@ body: id: steps attributes: label: Steps to reproduce the problem - description: Please provide us with precise step by step information on how to reproduce the bug + description: Please provide us with precise step by step instructions on how to reproduce the bug value: | 1. Go to .... 2. Press .... @@ -37,64 +37,14 @@ body: id: what-should attributes: label: What should have happened? - description: Tell what you think the normal behavior should be + description: Tell us what you think the normal behavior should be validations: required: true - - type: input - id: commit + - type: textarea + id: sysinfo attributes: - label: Version or Commit where the problem happens - description: "Which webui version or commit are you running ? (Do not write *Latest Version/repo/commit*, as this means nothing and will have changed by the time we read your issue. Rather, copy the **Version: v1.2.3** link at the bottom of the UI, or from the cmd/terminal if you can't launch it.)" - validations: - required: true - - type: dropdown - id: py-version - attributes: - label: What Python version are you running on ? - multiple: false - options: - - Python 3.10.x - - Python 3.11.x (above, no supported yet) - - Python 3.9.x (below, no recommended) - - type: dropdown - id: platforms - attributes: - label: What platforms do you use to access the UI ? - multiple: true - options: - - Windows - - Linux - - MacOS - - iOS - - Android - - Other/Cloud - - type: dropdown - id: device - attributes: - label: What device are you running WebUI on? - multiple: true - options: - - Nvidia GPUs (RTX 20 above) - - Nvidia GPUs (GTX 16 below) - - AMD GPUs (RX 6000 above) - - AMD GPUs (RX 5000 below) - - CPU - - Other GPUs - - type: dropdown - id: cross_attention_opt - attributes: - label: Cross attention optimization - description: What cross attention optimization are you using, Settings -> Optimizations -> Cross attention optimization - multiple: false - options: - - Automatic - - xformers - - sdp-no-mem - - sdp - - Doggettx - - V1 - - InvokeAI - - "None " + label: Sysinfo + description: System info file, generated by WebUI. You can generate it in settings, on the Sysinfo page. Drag the file into the field to upload it. If you submit your report without including the sysinfo file, the report will be closed. If needed, review the report to make sure it includes no personal information you don't want to share. If you can't start WebUI, you can use --dump-sysinfo commandline argument to generate the file. validations: required: true - type: dropdown @@ -108,21 +58,7 @@ body: - Brave - Apple Safari - Microsoft Edge - - type: textarea - id: cmdargs - attributes: - label: Command Line Arguments - description: Are you using any launching parameters/command line arguments (modified webui-user .bat/.sh) ? If yes, please write them below. Write "No" otherwise. - render: Shell - validations: - required: true - - type: textarea - id: extensions - attributes: - label: List of extensions - description: Are you using any extensions other than built-ins? If yes, provide a list, you can copy it at "Extensions" tab. Write "No" otherwise. - validations: - required: true + - Other - type: textarea id: logs attributes: diff --git a/README.md b/README.md index e7407473..49403732 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,7 @@ -# Stable Diffusion web UI-UX -Not just a browser interface based on Gradio library for Stable Diffusion. -A pixel perfect design, mobile friendly, customizable interface that adds accessibility, ease of use and extended functionallity to the stable diffusion web ui. -Enjoy! - - -Default theme - -![anapnoe_uiux](https://user-images.githubusercontent.com/124302297/227973574-6003142d-0c7c-41c6-9966-0792a94549e9.png) - -## Features of ui-ux -- resizable viewport -- switchable viewports (DoubleClick on the split handler to swap views) option in settings for default position -- mobile navigation -- top header tabs (option setting) -- hidden tabs (option setting) no need to restart this is a different implementation -- drag and drop reordable quick settings offcanvas aside view -- drag and drop images to txt2img and img2img and import generation info parameters along with a preview image -- ignore - remove overrides when import [multiselect] (option setting) -- resizable cards for extra networks and number of rows (option setting) -- lazy loading alternative offcanvas aside view for extra networks (option setting) -- live preview image fit method (option setting) -- generated image fit method (option setting) -- max resolution output for txt2img and img2img (option setting) -- performant dispatch for gradio's range slider and input number field issue: https://github.com/gradio-app/gradio/issues/3204 (option setting) latest update uses only one instance clone to mediate for the release event -- ticks input range sliders (option setting) -- pacman preloader unified colors on reload ui -- frame border animation when generating images -- progress bar on top of the page always visible (when scroll for mobile) -- remix icons -- style theme configurator extension to customize every aspect of theme in real time with cool global functions to change the hue / saturation / brightness or invert the theme colors -- pan and zoom in out functionality for sketch, inpaint, inpaint sketch -- fullscreen support for sketch, inpaint, inpaint sketch -- better lightbox with zoom in-out mobile gestures support etc.. - -## TODO -- small arrows next to icons sent to inpaint, extras, img2img etc -- component gallery navigate to previous generations inside the txt2img, img2img interface -- and auto load the current generation settings -- credits/about page display all 300+ contributors so far inside the UI - -Quick Settings aside off-canvas view - drag and drop to custom sort your settings - -![anapnoe_uiux_quicksettings](https://user-images.githubusercontent.com/124302297/227967695-f8bb01b5-5cc9-4238-80dd-06e261378d6e.png) - - -Extra Networks aside off-canvas view - -![anapnoe_uiux_extra_networks](https://user-images.githubusercontent.com/124302297/227968001-20eab8f5-da91-4a11-9fe0-230fec4ba720.png) - - -Detail img2img sketch view - -![anapnoe_uiux_sketch](https://user-images.githubusercontent.com/124302297/227973727-084da8e0-931a-4c62-ab73-39e988fd4523.png) - - -Theme Configurator - aside off-canvas view - -![anapnoe_uiux_theme_config](https://user-images.githubusercontent.com/124302297/227967844-45063edb-eb40-4224-9666-f506d21d7780.png) - - -Mobile 395px width - -![anapnoe_uiux_mobile](https://user-images.githubusercontent.com/124302297/227987709-36231d30-e6da-424a-8930-cc0c55a0b979.png) - +# Stable Diffusion web UI-UX +A bespoke, highly adaptable user interface for the Stable Diffusion, utilizing the powerful Gradio library. This cutting-edge browser interface offer an unparalleled level of customization and optimization for users, setting it apart from other web interfaces. +![](screenshot.png) ## Features [Detailed feature showcase with images](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Features): @@ -90,7 +28,7 @@ Mobile 395px width - CodeFormer, face restoration tool as an alternative to GFPGAN - RealESRGAN, neural network upscaler - ESRGAN, neural network upscaler with a lot of third party models - - SwinIR and Swin2SR([see here](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/2092)), neural network upscalers + - SwinIR and Swin2SR ([see here](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/2092)), neural network upscalers - LDSR, Latent diffusion super resolution upscaling - Resizing aspect ratio options - Sampling method selection @@ -108,7 +46,7 @@ Mobile 395px width - drag and drop an image/text-parameters to promptbox - Read Generation Parameters Button, loads parameters in promptbox to UI - Settings page -- Running arbitrary python code from UI (must run with --allow-code to enable) +- Running arbitrary python code from UI (must run with `--allow-code` to enable) - Mouseover hints for most UI elements - Possible to change defaults/mix/max/step values for UI elements via text config - Tiling support, a checkbox to create images that can be tiled like textures @@ -131,7 +69,7 @@ Mobile 395px width - also supports weights for prompts: `a cat :1.2 AND a dog AND a penguin :2.2` - No token limit for prompts (original stable diffusion lets you use up to 75 tokens) - DeepDanbooru integration, creates danbooru style tags for anime prompts -- [xformers](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Xformers), major speed increase for select cards: (add --xformers to commandline args) +- [xformers](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Xformers), major speed increase for select cards: (add `--xformers` to commandline args) - via extension: [History tab](https://github.com/yfszzx/stable-diffusion-webui-images-browser): view, direct and delete images conveniently within the UI - Generate forever option - Training tab @@ -140,39 +78,47 @@ Mobile 395px width - Clip skip - Hypernetworks - Loras (same as Hypernetworks but more pretty) -- A sparate UI where you can choose, with preview, which embeddings, hypernetworks or Loras to add to your prompt. +- A separate UI where you can choose, with preview, which embeddings, hypernetworks or Loras to add to your prompt - Can select to load a different VAE from settings screen - Estimated completion time in progress bar - API -- Support for dedicated [inpainting model](https://github.com/runwayml/stable-diffusion#inpainting-with-stable-diffusion) by RunwayML. +- Support for dedicated [inpainting model](https://github.com/runwayml/stable-diffusion#inpainting-with-stable-diffusion) by RunwayML - via extension: [Aesthetic Gradients](https://github.com/AUTOMATIC1111/stable-diffusion-webui-aesthetic-gradients), a way to generate images with a specific aesthetic by using clip images embeds (implementation of [https://github.com/vicgalle/stable-diffusion-aesthetic-gradients](https://github.com/vicgalle/stable-diffusion-aesthetic-gradients)) - [Stable Diffusion 2.0](https://github.com/Stability-AI/stablediffusion) support - see [wiki](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Features#stable-diffusion-20) for instructions - [Alt-Diffusion](https://arxiv.org/abs/2211.06679) support - see [wiki](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Features#alt-diffusion) for instructions - Now without any bad letters! - Load checkpoints in safetensors format -- Eased resolution restriction: generated image's domension must be a multiple of 8 rather than 64 +- Eased resolution restriction: generated image's dimension must be a multiple of 8 rather than 64 - Now with a license! - Reorder elements in the UI from settings screen -- ## Installation and Running -Make sure the required [dependencies](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Dependencies) are met and follow the instructions available for both [NVidia](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-NVidia-GPUs) (recommended) and [AMD](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-AMD-GPUs) GPUs. +Make sure the required [dependencies](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Dependencies) are met and follow the instructions available for: +- [NVidia](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-NVidia-GPUs) (recommended) +- [AMD](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-AMD-GPUs) GPUs. +- [Intel CPUs, Intel GPUs (both integrated and discrete)](https://github.com/openvinotoolkit/stable-diffusion-webui/wiki/Installation-on-Intel-Silicon) (external wiki page) Alternatively, use online services (like Google Colab): - [List of Online Services](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Online-Services) -### Installation on Windows +### Installation on Windows 10/11 with NVidia-GPUs using release package +1. Download `sd.webui.zip` from [v1.0.0-pre](https://github.com/AUTOMATIC1111/stable-diffusion-webui/releases/tag/v1.0.0-pre) and extract it's contents. +2. Run `update.bat`. +3. Run `run.bat`. +> For more details see [Install-and-Run-on-NVidia-GPUs](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-NVidia-GPUs) + +### Automatic Installation on Windows 1. Install [Python 3.10.6](https://www.python.org/downloads/release/python-3106/) (Newer version of Python does not support torch), checking "Add Python to PATH". 2. Install [git](https://git-scm.com/download/win). -3. Download the stable-diffusion-webui-ux repository, for example by running `git clone https://github.com/anapnoe/stable-diffusion-webui-ux.git`. +3. Download the stable-diffusion-webui repository, for example by running `git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git`. 4. Run `webui-user.bat` from Windows Explorer as normal, non-administrator, user. -### Installation on Linux +### Automatic Installation on Linux 1. Install the dependencies: ```bash # Debian-based: -sudo apt install wget git python3 python3-venv +sudo apt install wget git python3 python3-venv libgl1 libglib2.0-0 # Red Hat-based: sudo dnf install wget git python3 # Arch-based: @@ -180,17 +126,16 @@ sudo pacman -S wget git python3 ``` 2. Navigate to the directory you would like the webui to be installed and execute the following command: ```bash -bash <(wget -qO- https://raw.githubusercontent.com/anapnoe/stable-diffusion-webui-ux/master/webui.sh) +wget -q https://raw.githubusercontent.com/AUTOMATIC1111/stable-diffusion-webui/master/webui.sh ``` 3. Run `webui.sh`. 4. Check `webui-user.sh` for options. ### Installation on Apple Silicon Find the instructions [here](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Installation-on-Apple-Silicon). -and replace the path in step 3 with `git clone https://github.com/anapnoe/stable-diffusion-webui-ux` ## Contributing -Here's how to add code to the original repo: [Contributing](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Contributing) +Here's how to add code to this repo: [Contributing](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Contributing) ## Documentation @@ -227,5 +172,6 @@ Licenses for borrowed code can be found in `Settings -> Licenses` screen, and al - UniPC sampler - Wenliang Zhao - https://github.com/wl-zhao/UniPC - TAESD - Ollin Boer Bohan - https://github.com/madebyollin/taesd - LyCORIS - KohakuBlueleaf +- Restart sampling - lambertae - https://github.com/Newbeeer/diffusion_restart_sampling - Initial Gradio script - posted on 4chan by an Anonymous user. Thank you Anonymous user. - (You) diff --git a/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js b/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js new file mode 100644 index 00000000..eebc2d19 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js @@ -0,0 +1,419 @@ +function hexToRgb(color) { + var hex = color[0] === "#" ? color.slice(1) : color; + var c; // expand the short hex by doubling each character, fc0 -> ffcc00 + + if (hex.length !== 6) { + hex = (function() { + var result = []; + + for ( + var _i = 0, _Array$from = Array.from(hex); + _i < _Array$from.length; + _i++ + ) { + c = _Array$from[_i]; + result.push("".concat(c).concat(c)); + } + + return result; + })().join(""); + } + + var colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1); + var rgb = colorStr.map(function(col) { + return parseInt(col, 16); + }); + rgb.push(1); + return rgb; +} + +function rgbToHsl(rgb) { + var r = rgb[0] / 255; + var g = rgb[1] / 255; + var b = rgb[2] / 255; + var max = Math.max(r, g, b); + var min = Math.min(r, g, b); + var diff = max - min; + var add = max + min; + var hue = + min === max + ? 0 + : r === max + ? (60 * (g - b) / diff + 360) % 360 + : g === max ? 60 * (b - r) / diff + 120 : 60 * (r - g) / diff + 240; + var lum = 0.5 * add; + var sat = + lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add); + var h = Math.round(hue); + var s = Math.round(sat * 100); + var l = Math.round(lum * 100); + var a = rgb[3] || 1; + return [h, s, l, a]; +} + +function hexToHsl(color) { + var rgb = hexToRgb(color); + var hsl = rgbToHsl(rgb); + return "hsl(" + hsl[0] + "deg " + hsl[1] + "% " + hsl[2] + "%)"; +} + +function hslToHex(h, s, l) { + l /= 100; + var a = s * Math.min(l, 1 - l) / 100; + + var f = function f(n) { + var k = (n + h / 30) % 12; + var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + return Math.round(255 * Math.max(0, Math.min(color, 1))) + .toString(16) + .padStart(2, "0"); // convert to Hex and prefix "0" if needed + }; + + return "#".concat(f(0)).concat(f(8)).concat(f(4)); +} + +function hsl2rgb(h, s, l) { + var a = s * Math.min(l, 1 - l); + + var f = function f(n) { + var k = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : (n + h / 30) % 12; + return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + }; + + return [f(0), f(8), f(4)]; +} + +function invertColor(hex) { + if (hex.indexOf("#") === 0) { + hex = hex.slice(1); + } // convert 3-digit hex to 6-digits. + + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + + if (hex.length !== 6) { + throw new Error("Invalid HEX color."); + } // invert color components + + var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16), + g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16), + b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); // pad each with zeros and return + + return "#" + padZero(r) + padZero(g) + padZero(b); +} + +function padZero(str, len) { + len = len || 2; + var zeros = new Array(len).join("0"); + return (zeros + str).slice(-len); +} + +function getValsWrappedIn(str, c1, c2) { + var rg = new RegExp("(?<=\\" + c1 + ")(.*?)(?=\\" + c2 + ")", "g"); + return str.match(rg); +} + +var styleobj = {}; +var hslobj = {}; +var isColorsInv; + +var toHSLArray = function toHSLArray(hslStr) { + return hslStr.match(/\d+/g).map(Number); +}; + +function offsetColorsHSV(ohsl) { + var inner_styles = ""; + + for (var key in styleobj) { + var keyVal = styleobj[key]; + + if (keyVal.indexOf("#") != -1 || keyVal.indexOf("hsl") != -1) { + var colcomp = document.body.querySelector("#" + key + " input"); + + if (colcomp) { + var hsl = void 0; + + if (keyVal.indexOf("#") != -1) { + keyVal = keyVal.replace(/\s+/g, ""); //inv ? keyVal = invertColor(keyVal) : 0; + + if (isColorsInv) { + keyVal = invertColor(keyVal); + styleobj[key] = keyVal; + } + + hsl = rgbToHsl(hexToRgb(keyVal)); + } else { + if (isColorsInv) { + var c = toHSLArray(keyVal); + + var _hex = hslToHex(c[0], c[1], c[2]); + + keyVal = invertColor(_hex); + styleobj[key] = keyVal; + hsl = rgbToHsl(hexToRgb(keyVal)); + } else { + hsl = toHSLArray(keyVal); + } + } + + var h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360; + var s = parseInt(hsl[1]) + parseInt(ohsl[1]); + var l = parseInt(hsl[2]) + parseInt(ohsl[2]); + var hex = hslToHex( + h, + Math.min(Math.max(s, 0), 100), + Math.min(Math.max(l, 0), 100) + ); + colcomp.value = hex; + hslobj[key] = "hsl(" + h + "deg " + s + "% " + l + "%)"; + inner_styles += key + ":" + hslobj[key] + ";"; + } + } else { + inner_styles += key + ":" + styleobj[key] + ";"; + } + } + + isColorsInv = false; + var preview_styles = document.body.querySelector("#preview-styles"); + preview_styles.innerHTML = ":root {" + inner_styles + "}"; + preview_styles.innerHTML += + "@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);}}"; + var vars_textarea = document.body.querySelector("#theme_vars textarea"); + vars_textarea.value = inner_styles; + window.updateInput(vars_textarea); +} + +function updateTheme(vars) { + var inner_styles = ""; + + var _loop = function _loop(i) { + var key = vars[i].split(":"); + var id = key[0].replace(/\s+/g, ""); + var val = key[1].trim(); + styleobj[id] = val; + inner_styles += id + ":" + val + ";"; + document.body.querySelectorAll("#" + id + " input").forEach(function(elem) { + if (val.indexOf("hsl") != -1) { + var hsl = toHSLArray(val); + var hex = hslToHex(hsl[0], hsl[1], hsl[2]); + elem.value = hex; + } else { + elem.value = val.split("px")[0]; + } + }); + }; + + for (var i = 0; i < vars.length - 1; i++) { + _loop(i); + } + + var preview_styles = document.body.querySelector("#preview-styles"); + + if (preview_styles) { + preview_styles.innerHTML = ":root {" + inner_styles + "}"; + preview_styles.innerHTML += + "@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);}}"; + } else { + var r = document.body; + var style = document.createElement("style"); + style.id = "preview-styles"; + style.innerHTML = ":root {" + inner_styles + "}"; + style.innerHTML += + "@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);}}"; + r.appendChild(style); + } + + var vars_textarea = document.body.querySelector("#theme_vars textarea"); + var css_textarea = document.body.querySelector("#theme_css textarea"); + vars_textarea.value = inner_styles; + css_textarea.value = css_textarea.value; //console.log(Object); + + window.updateInput(vars_textarea); + window.updateInput(css_textarea); +} + +function applyTheme() { + console.log("apply"); +} + +function initTheme(styles) { + var css_styles = styles.split("/*BREAKPOINT_CSS_CONTENT*/"); + var init_css_vars = css_styles[0].split("}")[0].split("{")[1]; + init_css_vars = init_css_vars.replace(/\n|\r/g, ""); + var init_vars = init_css_vars.split(";"); + var vars = init_vars; //console.log(vars); + + var vars_textarea = document.body.querySelector("#theme_vars textarea"); + var css_textarea = document.body.querySelector("#theme_css textarea"); + vars_textarea.value = init_css_vars; + var additional_styles = css_styles[1] !== undefined ? css_styles[1] : ""; + css_textarea.value = + "/*BREAKPOINT_CSS_CONTENT*/" + + additional_styles + + "/*BREAKPOINT_CSS_CONTENT*/"; + updateTheme(vars); + var preview_styles = document.body.querySelector("#preview-styles"); + + if (!preview_styles) { + var style = document.createElement("style"); + style.id = "preview-styles"; + style.innerHTML = styles; + document.body.appendChild(style); + } + + var intervalChange; + document.body + .querySelectorAll("#ui_theme_settings input") + .forEach(function(elem) { + elem.addEventListener("input", function(e) { + var celem = e.currentTarget; + var val = e.currentTarget.value; + var curr_val; + + switch (e.currentTarget.type) { + case "range": + celem = celem.parentElement; + val = e.currentTarget.value + "px"; + break; + + case "color": + celem = celem.parentElement.parentElement; + val = e.currentTarget.value; + break; + + case "number": + celem = celem.parentElement.parentElement.parentElement; + val = e.currentTarget.value + "px"; + break; + } + + if (celem.id === "--ae-input-slider-height") { + val = e.currentTarget.value; + } + + styleobj[celem.id] = val; //console.log(styleobj); + + if (intervalChange != null) clearInterval(intervalChange); + intervalChange = setTimeout(function() { + var inner_styles = ""; + + for (var key in styleobj) { + inner_styles += key + ":" + styleobj[key] + ";"; + } + + vars = inner_styles.split(";"); + preview_styles.innerHTML = ":root {" + inner_styles + "}"; + preview_styles.innerHTML += + "@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);}}"; + vars_textarea.value = inner_styles; + window.updateInput(vars_textarea); + + offsetColorsHSV(hsloffset); + }, 1000); + }); + }); + var reset_btn = document.getElementById("theme_reset_btn"); + reset_btn.addEventListener("click", function(e) { + e.preventDefault(); + e.stopPropagation(); + document.body + .querySelectorAll("#ui_theme_hsv input") + .forEach(function(elem) { + elem.value = 0; + }); + hsloffset = [0, 0, 0]; + updateTheme(init_vars); + }); + var intervalCheck; + + function dropDownOnChange() { + if (init_css_vars !== vars_textarea.value) { + clearInterval(intervalCheck); + init_css_vars = vars_textarea.value.replace(/\n|\r/g, ""); + vars_textarea.value = init_css_vars; + init_vars = init_css_vars.split(";"); + vars = init_vars; + updateTheme(vars); + } + } + + var drop_down = document.body.querySelector("#themes_drop_down input"); + drop_down.addEventListener("click", function(e) { + if (intervalCheck !== null) clearInterval(intervalCheck); + vars_textarea.value = init_css_vars; + intervalCheck = setInterval(dropDownOnChange, 500); + }); + var hsloffset = [0, 0, 0]; + var hue = document.body + .querySelectorAll("#theme_hue input") + .forEach(function(elem) { + elem.addEventListener("change", function(e) { + e.preventDefault(); + e.stopPropagation(); + hsloffset[0] = e.currentTarget.value; + offsetColorsHSV(hsloffset); + }); + }); + var sat = document.body + .querySelectorAll("#theme_sat input") + .forEach(function(elem) { + elem.addEventListener("change", function(e) { + e.preventDefault(); + e.stopPropagation(); + hsloffset[1] = e.currentTarget.value; + offsetColorsHSV(hsloffset); + }); + }); + var brt = document.body + .querySelectorAll("#theme_brt input") + .forEach(function(elem) { + elem.addEventListener("change", function(e) { + e.preventDefault(); + e.stopPropagation(); + hsloffset[2] = e.currentTarget.value; + offsetColorsHSV(hsloffset); + }); + }); + var inv_btn = document.getElementById("theme_invert_btn"); + inv_btn.addEventListener("click", function(e) { + e.preventDefault(); + e.stopPropagation(); + isColorsInv = !isColorsInv; + offsetColorsHSV(hsloffset); + }); +} + +function observeGradioApp() { + var observer = new MutationObserver(function() { + var css = document.querySelector('[rel="stylesheet"][href*="user"]'); + var block = gradioApp().getElementById("tab_ui_theme"); + + if (css && block) { + observer.disconnect(); + setTimeout(function() { + var rootRules = Array.from(css.sheet.cssRules).filter(function( + cssRule + ) { + return ( + cssRule instanceof CSSStyleRule && cssRule.selectorText === ":root" + ); + }); + var rootCssText = rootRules[0].cssText; //console.log("Loading theme vars", rootCssText); + + initTheme(rootCssText); + }, "500"); + } + }); + observer.observe(gradioApp(), { + childList: true, + subtree: true + }); +} + +document.addEventListener("DOMContentLoaded", function() { + observeGradioApp(); +}); diff --git a/extensions-builtin/anapnoe-sd-theme-editor/scripts/ui_theme.py b/extensions-builtin/anapnoe-sd-theme-editor/scripts/ui_theme.py new file mode 100644 index 00000000..399798e1 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/scripts/ui_theme.py @@ -0,0 +1,163 @@ +import os +import shutil +from pathlib import Path +import gradio as gr +import modules.scripts as scripts +from modules import script_callbacks, shared + +basedir = scripts.basedir() +webui_dir = Path(basedir).parents[1] + +themes_folder = os.path.join(basedir, "themes") +javascript_folder = os.path.join(basedir, "javascript") +webui_style_path = os.path.join(webui_dir, "user.css") + +def get_files(folder, file_filter=[], file_list=[], split=False): + file_list = [file_name if not split else os.path.splitext(file_name)[0] for file_name in os.listdir(folder) if os.path.isfile(os.path.join(folder, file_name)) and file_name not in file_filter] + return file_list + + +def on_ui_tabs(): + + with gr.Blocks(analytics_enabled=False) as ui_theme: + with gr.Row(): + with gr.Column(): + with gr.Row(): + themes_dropdown = gr.Dropdown(label="Themes", elem_id="themes_drop_down", interactive=True, choices=get_files(themes_folder,[".css, .txt"]), type="value") + save_as_filename = gr.Text(label="Save / Save as") + with gr.Row(): + reset_button = gr.Button(elem_id="theme_reset_btn", value="Reset", variant="primary") + #apply_button = gr.Button(elem_id="theme_apply_btn", value="Apply", variant="primary") + save_button = gr.Button(value="Save", variant="primary") + #delete_button = gr.Button(value="Delete", variant="primary") + + #with gr.Accordion(label="Debug View", open=True): + with gr.Row(elem_id="theme_hidden"): + vars_text = gr.Textbox(label="Vars", elem_id="theme_vars", show_label=True, lines=7, interactive=False, visible=True) + css_text = gr.Textbox(label="Css", elem_id="theme_css", show_label=True, lines=7, interactive=False, visible=True) + #result_text = gr.Text(elem_id="theme_result", interactive=False, visible=False) + + with gr.Accordion(label="Theme Color adjustments", open=True): + with gr.Row(): + with gr.Column(elem_id="ui_theme_hsv"): + gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1) + gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True) + gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True) + + gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary") + + with gr.Column(elem_id="ui_theme_settings"): + with gr.Accordion(label="Main", open=False): + gr.ColorPicker(elem_id="--ae-main-bg-color", interactive=True, label="Background color") + gr.ColorPicker(elem_id="--ae-primary-color", label="Primary color") + gr.ColorPicker(elem_id="--ae-secondary-color", label="Secondary color") + + with gr.Accordion(label="Spacing", open=False): + gr.Slider(elem_id="--ae-gap-size-val", label='Gap size', minimum=0, maximum=8, step=1) + + """ with gr.Accordion(elem_classes="hidden", label="Spacing (Mobile)", open=False): + gr.Slider(elem_id="--ae-mobile-gap-size-val", label='Gap size', minimum=0, maximum=8, step=1) """ + + with gr.Accordion(label="Panel", open=False): + gr.ColorPicker(elem_id="--ae-panel-bg-color", label="Panel background color") + gr.ColorPicker(elem_id="--ae-panel-border-color", label="Panel border color") + gr.Slider(elem_id="--ae-panel-padding", label='Panel padding', minimum=0, maximum=10, step=1) + gr.Slider(elem_id="--ae-border-radius", label='Panel border radius', minimum=0, maximum=8, step=1) + gr.Slider(elem_id="--ae-border-size", label='Panel border size', minimum=0, maximum=4, step=1) + + with gr.Accordion(label="Component", open=False): + + gr.Slider(elem_id="--ae-input-height", label='Component size', minimum=28, maximum=45, step=1) + gr.Slider(elem_id="--ae-input-slider-height", label='Slider height', minimum=0.1, maximum=1, step=0.1) + gr.Slider(elem_id="--ae-input-padding", label='Padding', minimum=0, maximum=10, step=1) + gr.Slider(elem_id="--ae-input-font-size", label='Font size', minimum=10, maximum=16, step=1) + gr.Slider(elem_id="--ae-input-line-height", label='Line height', minimum=10, maximum=40, step=1) + gr.Slider(elem_id="--ae-input-border-size", label='Border size', minimum=0, maximum=4, step=1) + gr.Slider(elem_id="--ae-input-border-radius", label='Border radius', minimum=0, maximum=8, step=1) + + gr.ColorPicker(elem_id="--ae-input-bg-color", label="Input background color") + gr.ColorPicker(elem_id="--ae-input-border-color", label="Input border color") + gr.ColorPicker(elem_id="--ae-input-text-color", label="Input text color") + gr.ColorPicker(elem_id="--ae-input-placeholder-color", label="Input placeholder color") + + gr.ColorPicker(elem_id="--ae-label-color", label="Label color") + gr.ColorPicker(elem_id="--ae-secondary-label-color", label="Secondary label color") + + gr.ColorPicker(elem_id="--ae-input-hover-text-color", label="Input hover text color") + + + + with gr.Accordion(label="Group", open=False): + gr.ColorPicker(elem_id="--ae-group-bg-color", label="Group background color") + gr.ColorPicker(elem_id="--ae-group-border-color", label="Group border color") + gr.Slider(elem_id="--ae-group-padding", label='Group padding', minimum=0, maximum=10, step=1) + gr.Slider(elem_id="--ae-group-radius", label='Group border radius', minimum=0, maximum=8, step=1) + gr.Slider(elem_id="--ae-group-border-size", label='Group border size', minimum=0, maximum=4, step=1) + gr.Slider(elem_id="--ae-group-gap", label='Group gap size', minimum=0, maximum=8, step=1) + + + + + def save_theme( vars_text, css_text, filename): + style_data= ":root{" + vars_text + "}" + css_text + with open(os.path.join(themes_folder, f"{filename}.css"), 'w', encoding="utf-8") as file: + file.write(vars_text) + file.close() + with open(webui_style_path, 'w', encoding="utf-8") as file: + file.write(style_data) + file.close() + themes_dropdown.choices=get_files(themes_folder,[".css, .txt"]) + return gr.update(choices=themes_dropdown.choices, value=f"{filename}.css") + + def open_theme(filename, css_text): + with open(os.path.join(themes_folder, f"{filename}"), 'r') as file: + vars_text=file.read() + no_ext=filename.rsplit('.', 1)[0] + #save_theme( vars_text, css_text, no_ext) + # shared.state.interrupt() + # shared.state.need_restart = True + return [vars_text, no_ext] + + # def delete_theme(filename): + # try: + # os.remove(os.path.join(themes_folder, filename)) + # except FileNotFoundError: + # pass + + # delete_button.click( + # fn = lambda: delete_theme() + # ) + + save_button.click( + fn=save_theme, + inputs=[vars_text, css_text, save_as_filename], + outputs=themes_dropdown + ) + + themes_dropdown.change( + fn=open_theme, + #_js = "applyTheme", + inputs=[themes_dropdown, css_text], + outputs=[vars_text, save_as_filename] + ) + + # apply_button.click( + # fn=None, + # _js = "applyTheme" + # ) + + # vars_text.change( + # fn=None, + # _js = "applyTheme", + # inputs=[], + # outputs=[vars_text, css_text] + # ) + + + + + return (ui_theme, 'Theme', 'ui_theme'), + + + +script_callbacks.on_ui_tabs(on_ui_tabs) \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/style.css b/extensions-builtin/anapnoe-sd-theme-editor/style.css new file mode 100644 index 00000000..3e19ab0d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/style.css @@ -0,0 +1,36 @@ +#theme_hidden, +#setting_ui_header_tabs .theme, +#setting_ui_hidden_tabs .theme { + display: none !important; +} + +#tab_ui_theme [id*="color"] label { + display: flex; + align-items: center; + pointer-events: none; +} +#tab_ui_theme [id*="color"] label span { + min-width: 50% !important; +} +#tab_ui_theme [id*="color"] label input { + flex-grow: 1; + pointer-events: all; + cursor: pointer; +} + +#settings_ui_theme > div > div { + flex-direction: row; + flex-wrap: wrap; +} +#settings_ui_theme > div > div > div { + max-width: 30%; +} + +#tab_ui_theme > div { + padding: 16px !important; + padding-top: 0 !important; +} + +#ui_theme_hsv + button { + min-width: unset; +} diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_alpha.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_alpha.css new file mode 100644 index 00000000..ebaf8380 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_alpha.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(205deg 83% 46%);--ae-secondary-color:hsl(325deg 83% 46%);--ae-main-bg-color:rgb(32 32 32);--ae-input-height:35px;--ae-input-slider-height:0.6;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:23px;--ae-label-color:rgba(255, 255, 255, 0.75);--ae-secondary-label-color:rgba(255, 255, 255, 0.5);--ae-input-border-size:2px;--ae-input-border-radius:0px;--ae-input-text-color:rgba(255, 255, 255, 0.75);--ae-input-placeholder-color:rgba(255, 255, 255, 0.35);--ae-input-bg-color:rgba(0, 0, 0, 0.25);--ae-input-border-color:rgba(0, 0, 0, 0.1);--ae-input-hover-text-color:rgba(255, 255, 255, 0.75);--ae-panel-bg-color:rgba(64, 64, 64, 0.5);--ae-panel-border-color:rgba(64, 64, 64, 0.75);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:2px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(0deg 0% 16%);--ae-group-padding:2px;--ae-group-radius:7px;--ae-group-border-size:2px;--ae-group-border-color:hsl(0deg 0% 16%);--ae-group-gap:6px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_default.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_default.css new file mode 100644 index 00000000..5ad1606b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_default.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(168deg 97% 41%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:24px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(216deg 5% 60%);--ae-input-border-size:0px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(216deg 5% 60%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(225deg 6% 13%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:2px;--ae-group-radius:0px;--ae-group-border-size:1px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:5px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_light.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_light.css new file mode 100644 index 00000000..d046467b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_light.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(0deg 0% 0%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 95%);--ae-input-height:28px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:16px;--ae-label-color:hsl(0deg 0% 15%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(0deg 0% 0%);--ae-input-placeholder-color:hsl(0deg 0% 89%);--ae-input-bg-color:hsl(0deg 100% 100%);--ae-input-border-color:hsl(0deg 0% 95%);--ae-input-hover-text-color:hsl(0deg 100% 100%);--ae-panel-bg-color:hsl(0deg 0% 98%);--ae-panel-border-color:hsl(0deg 0% 87%);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:0px;--ae-gap-size-val:3px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(0deg 0% 94%);--ae-group-padding:2px;--ae-group-radius:6px;--ae-group-border-size:0px;--ae-group-border-color:hsl(0deg 0% 94%);--ae-group-gap:2px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_minimal.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_minimal.css new file mode 100644 index 00000000..04696bb0 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_minimal.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(168deg 96% 42%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 8%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(0deg 0% 65%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:2px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(168deg 96% 42%);--ae-input-placeholder-color:hsl(168deg 96% 42%);--ae-input-bg-color:hsl(0deg 0% 10%);--ae-input-border-color:hsl(0deg 0% 10%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(0deg 0% 17%);--ae-panel-border-color:hsl(0deg 0% 17%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:2px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:2px;--ae-panel-border-radius:4px;--ae-subpanel-border-radius:4px;--ae-outside-gap-size:1px;--ae-inside-padding-size:5px;--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-mobile-outside-gap-size:3px;--ae-mobile-inside-padding-size:3px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_minimal_orange.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_minimal_orange.css new file mode 100644 index 00000000..7d84204c --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_minimal_orange.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(18deg 124% 42%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(210deg 28% 8%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(210deg 28% 65%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:2px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(18deg 100% 42%);--ae-input-placeholder-color:hsl(18deg 100% 42%);--ae-input-bg-color:hsl(210deg 28% 10%);--ae-input-border-color:hsl(210deg 28% 10%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(210deg 28% 17%);--ae-panel-border-color:hsl(210deg 28% 17%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:2px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:2px;--ae-panel-border-radius:4px;--ae-subpanel-border-radius:4px;--ae-outside-gap-size:4px;--ae-inside-padding-size:4px;--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-mobile-outside-gap-size:3px;--ae-mobile-inside-padding-size:3px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_moonlight.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_moonlight.css new file mode 100644 index 00000000..5bde3e5e --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_moonlight.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(222deg 75% 62%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(240deg 16% 6%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(185deg 66% 85%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:2px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(222deg 75% 62%);--ae-input-placeholder-color:hsl(222deg 75% 62%);--ae-input-bg-color:hsl(240deg 17% 8%);--ae-input-border-color:hsl(240deg 20% 16%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(240deg 18% 12%);--ae-panel-border-color:hsl(240deg 16% 16%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:2px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:2px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_orange.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_orange.css new file mode 100644 index 00000000..715c5624 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_orange.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(15deg 77% 58%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:28px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:16px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(15deg 77% 58%);--ae-input-placeholder-color:hsl(216deg 5% 60%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(16deg 94% 93%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:0px;--ae-gap-size-val:3px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:2px;--ae-group-radius:6px;--ae-group-border-size:0px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:2px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_quad.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_quad.css new file mode 100644 index 00000000..97442448 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_quad.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(168deg 97% 41%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:23px;--ae-label-color:hsl(210deg 4% 80%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(168deg 97% 41%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(210deg 6% 20%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(220deg 5% 25%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:1px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_thick_group_green.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_thick_group_green.css new file mode 100644 index 00000000..3deb6d32 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_thick_group_green.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(168deg 97% 41%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:0px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(168deg 97% 41%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(168deg 96% 80%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(210deg 6% 20%);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:2px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:3px;--ae-group-radius:8px;--ae-group-border-size:1px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:5px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_thin_cyan.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_thin_cyan.css new file mode 100644 index 00000000..7de81f79 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_thin_cyan.css @@ -0,0 +1 @@ +--ae-primary-color:hsl(190deg 75% 60%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:23px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(216deg 5% 60%);--ae-input-placeholder-color:hsl(190deg 75% 60%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(225deg 6% 13%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:2px;--ae-group-radius:0px;--ae-group-border-size:1px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:5px;--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-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px; \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_tron2.css b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_tron2.css new file mode 100644 index 00000000..b48ad837 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-theme-editor/themes/sdxl_tron2.css @@ -0,0 +1 @@ +--ae-main-bg-color:hsl(185deg 75% 3%);--ae-primary-color:hsl(182deg 95% 51%);--ae-input-bg-color:hsl(184deg 89% 7%);--ae-input-border-color:hsl(185deg 72% 25%);--ae-panel-bg-color:hsl(185deg 73% 3%);--ae-panel-border-color:hsl(185deg 72% 25%);--ae-panel-border-radius:0px;--ae-subpanel-border-radius:0px;--ae-outside-gap-size:2px;--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(182deg 95% 75%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:8px;--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-gap-size-val:1px;--ae-input-font-size:11px;--ae-input-line-height:23px;--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-padding:5px;--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-gap:1px;--ae-group-bg-color:hsl(185deg 73% 3%);--ae-group-border-color:hsl(185deg 73% 3%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-input-text-color:hsl(168deg 75% 70%);--ae-input-placeholder-color:hsl(185deg 72% 25%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-hover-text-color:hsl(182deg 94% 80%); \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/favicon.svg b/extensions-builtin/anapnoe-sd-uiux/html/favicon.svg new file mode 100644 index 00000000..0cd7e9a2 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/favicon.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/images/Guru_meditation.gif b/extensions-builtin/anapnoe-sd-uiux/html/images/Guru_meditation.gif new file mode 100644 index 00000000..66e9dcd4 Binary files /dev/null and b/extensions-builtin/anapnoe-sd-uiux/html/images/Guru_meditation.gif differ diff --git a/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-gradio-app-visual-builder.png b/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-gradio-app-visual-builder.png new file mode 100644 index 00000000..9b8ecb38 Binary files /dev/null and b/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-gradio-app-visual-builder.png differ diff --git a/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux-orange.png b/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux-orange.png new file mode 100644 index 00000000..7e447cdc Binary files /dev/null and b/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux-orange.png differ diff --git a/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux.png b/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux.png new file mode 100644 index 00000000..2875b064 Binary files /dev/null and b/extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux.png differ diff --git a/extensions-builtin/anapnoe-sd-uiux/html/images/workspaces.png b/extensions-builtin/anapnoe-sd-uiux/html/images/workspaces.png new file mode 100644 index 00000000..d60477c1 Binary files /dev/null and b/extensions-builtin/anapnoe-sd-uiux/html/images/workspaces.png differ diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/add-box-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/add-box-line.svg new file mode 100644 index 00000000..dc56100a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/add-box-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/ai-generate.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/ai-generate.svg new file mode 100644 index 00000000..0d5aa6f8 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/ai-generate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-down-s-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-down-s-line.svg new file mode 100644 index 00000000..6c073430 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-down-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-go-back-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-go-back-line.svg new file mode 100644 index 00000000..f01c233d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-go-back-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-right-s-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-right-s-line.svg new file mode 100644 index 00000000..48dcbb05 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-right-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-right-up-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-right-up-line.svg new file mode 100644 index 00000000..8dfe241a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-right-up-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-circle-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-circle-fill.svg new file mode 100644 index 00000000..53a9828e --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-circle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-circle-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-circle-line.svg new file mode 100644 index 00000000..6e2876a7 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-down-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-down-line.svg new file mode 100644 index 00000000..e4fee21b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-down-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-line.svg new file mode 100644 index 00000000..da830a68 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-s-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-s-line.svg new file mode 100644 index 00000000..f5111cd3 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/arrow-up-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/artboard-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/artboard-line.svg new file mode 100644 index 00000000..6998c0c1 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/artboard-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/aspect-ratio-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/aspect-ratio-line.svg new file mode 100644 index 00000000..855f9938 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/aspect-ratio-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/ball-pen-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/ball-pen-line.svg new file mode 100644 index 00000000..e464a517 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/ball-pen-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/bard-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/bard-line.svg new file mode 100644 index 00000000..7cd55f73 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/bard-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/bill-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/bill-line.svg new file mode 100644 index 00000000..e9a7ba3a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/bill-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/bmc-logo2.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/bmc-logo2.svg new file mode 100644 index 00000000..6766ec42 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/bmc-logo2.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/box-1-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-1-fill.svg new file mode 100644 index 00000000..c1ce271a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-1-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/box-1-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-1-line.svg new file mode 100644 index 00000000..10ca0b68 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-1-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/box-2-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-2-fill.svg new file mode 100644 index 00000000..017444ff --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/box-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-2-line.svg new file mode 100644 index 00000000..3e558a68 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/box-3-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-3-fill.svg new file mode 100644 index 00000000..2812f7f7 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-3-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/box-3-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-3-line.svg new file mode 100644 index 00000000..34fef19d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/box-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/boxing-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/boxing-line.svg new file mode 100644 index 00000000..d60a815b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/boxing-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/brush-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/brush-line.svg new file mode 100644 index 00000000..6f8a957d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/brush-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/bug-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/bug-2-line.svg new file mode 100644 index 00000000..350993d6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/bug-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/camera-lens-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/camera-lens-line.svg new file mode 100644 index 00000000..5adb9298 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/camera-lens-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-blank-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-blank-line.svg new file mode 100644 index 00000000..d6c2aa6d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-blank-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-indeterminate-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-indeterminate-line.svg new file mode 100644 index 00000000..b4c69c05 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-indeterminate-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-multiple-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-multiple-line.svg new file mode 100644 index 00000000..2c23848c --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/checkbox-multiple-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/clipboard-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/clipboard-line.svg new file mode 100644 index 00000000..9ee97314 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/clipboard-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/close-circle-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/close-circle-line.svg new file mode 100644 index 00000000..90477e5f --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/close-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/close-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/close-line.svg new file mode 100644 index 00000000..e39564d9 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/close-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/compass-4-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/compass-4-line.svg new file mode 100644 index 00000000..7d894275 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/compass-4-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/computer-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/computer-fill.svg new file mode 100644 index 00000000..ea728890 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/computer-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/contract-left-right-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/contract-left-right-line.svg new file mode 100644 index 00000000..dfeb9607 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/contract-left-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/contract-up-down-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/contract-up-down-line.svg new file mode 100644 index 00000000..c52aaf32 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/contract-up-down-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/contrast-drop-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/contrast-drop-2-line.svg new file mode 100644 index 00000000..abd8f3ea --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/contrast-drop-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/corner-up-right-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/corner-up-right-fill.svg new file mode 100644 index 00000000..55510a95 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/corner-up-right-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/corner-up-right-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/corner-up-right-line.svg new file mode 100644 index 00000000..e561b5b7 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/corner-up-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/cpu-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/cpu-fill.svg new file mode 100644 index 00000000..fe016773 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/cpu-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/cpu-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/cpu-line.svg new file mode 100644 index 00000000..7d4922a1 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/cpu-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/crop-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/crop-line.svg new file mode 100644 index 00000000..d0fef9b6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/crop-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/delete-bin-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/delete-bin-2-line.svg new file mode 100644 index 00000000..a6781f5a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/delete-bin-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/delete-bin-5-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/delete-bin-5-line.svg new file mode 100644 index 00000000..f0da62ec --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/delete-bin-5-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/dice-1.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/dice-1.svg new file mode 100644 index 00000000..ece3905d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/dice-1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/download-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/download-line.svg new file mode 100644 index 00000000..1d40a4fd --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/download-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/draft-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/draft-line.svg new file mode 100644 index 00000000..f12c2b29 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/draft-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/drag-drop-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/drag-drop-line.svg new file mode 100644 index 00000000..d6d78a5b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/drag-drop-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/drag-move-2-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/drag-move-2-fill.svg new file mode 100644 index 00000000..80637b0e --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/drag-move-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/drop-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/drop-line.svg new file mode 100644 index 00000000..b39581ae --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/drop-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/dvd-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/dvd-line.svg new file mode 100644 index 00000000..8fbf4cd5 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/dvd-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/edit-box-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/edit-box-line.svg new file mode 100644 index 00000000..c2cf8237 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/edit-box-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/edit-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/edit-line.svg new file mode 100644 index 00000000..a92e54f3 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/edit-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/emotion-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/emotion-line.svg new file mode 100644 index 00000000..9c90cdc6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/emotion-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/equalizer-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/equalizer-fill.svg new file mode 100644 index 00000000..c7e0da6a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/equalizer-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/equalizer-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/equalizer-line.svg new file mode 100644 index 00000000..be81d936 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/equalizer-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/file-download-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-download-line.svg new file mode 100644 index 00000000..935f2ebe --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-download-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/file-edit-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-edit-fill.svg new file mode 100644 index 00000000..dc3ef11a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-edit-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/file-info-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-info-fill.svg new file mode 100644 index 00000000..c0ea9a09 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-info-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/file-info-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-info-line.svg new file mode 100644 index 00000000..d64ca293 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-info-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/file-zip-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-zip-line.svg new file mode 100644 index 00000000..e5f83060 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/file-zip-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/flashlight-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/flashlight-line.svg new file mode 100644 index 00000000..fe131573 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/flashlight-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-2-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-2-fill.svg new file mode 100644 index 00000000..f873ad32 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-2-line.svg new file mode 100644 index 00000000..84c537b4 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-line.svg new file mode 100644 index 00000000..b5819e89 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/focus-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/folder-open-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/folder-open-line.svg new file mode 100644 index 00000000..94ef19f1 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/folder-open-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/fullscreen-exit-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/fullscreen-exit-line.svg new file mode 100644 index 00000000..d3482777 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/fullscreen-exit-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/fullscreen-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/fullscreen-line.svg new file mode 100644 index 00000000..573526cb --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/fullscreen-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/github-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/github-fill.svg new file mode 100644 index 00000000..206c5517 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/github-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/github-fill.xml b/extensions-builtin/anapnoe-sd-uiux/html/svg/github-fill.xml new file mode 100644 index 00000000..8fe0e919 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/github-fill.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/gradio-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/gradio-fill.svg new file mode 100644 index 00000000..c03c6b86 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/gradio-fill.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/gradio-fill.xml b/extensions-builtin/anapnoe-sd-uiux/html/svg/gradio-fill.xml new file mode 100644 index 00000000..6ea1d1d8 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/gradio-fill.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/grid-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/grid-fill.svg new file mode 100644 index 00000000..fef4a086 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/grid-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/grid-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/grid-line.svg new file mode 100644 index 00000000..0050582b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/grid-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/group-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/group-2-line.svg new file mode 100644 index 00000000..de5a2c3e --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/group-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-add-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-add-fill.svg new file mode 100644 index 00000000..8d7234bf --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-add-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-fill.svg new file mode 100644 index 00000000..91e44eea --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-line.svg new file mode 100644 index 00000000..8591aeaf --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/heart-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/image-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-2-line.svg new file mode 100644 index 00000000..2f665340 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/image-add-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-add-line.svg new file mode 100644 index 00000000..12c227bb --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-add-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/image-edit-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-edit-line.svg new file mode 100644 index 00000000..b5601596 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-edit-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/image-icon.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-icon.svg new file mode 100644 index 00000000..42b648af --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/image-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-line.svg new file mode 100644 index 00000000..7b1d5e24 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/image-update.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-update.svg new file mode 100644 index 00000000..3abf12df --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/image-update.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/infinity-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/infinity-fill.svg new file mode 100644 index 00000000..7204f234 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/infinity-fill.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/information-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/information-fill.svg new file mode 100644 index 00000000..39111d4d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/information-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/information-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/information-line.svg new file mode 100644 index 00000000..0983ccf9 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/information-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/install-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/install-line.svg new file mode 100644 index 00000000..ef9c67a7 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/install-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/landscape-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/landscape-line.svg new file mode 100644 index 00000000..69231da2 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/landscape-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/layout-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/layout-2-line.svg new file mode 100644 index 00000000..7afdae1f --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/layout-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/layout-grid-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/layout-grid-line.svg new file mode 100644 index 00000000..8cb42b03 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/layout-grid-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/list-settings-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/list-settings-line.svg new file mode 100644 index 00000000..b4cad125 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/list-settings-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/loop-right-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/loop-right-line.svg new file mode 100644 index 00000000..1267be06 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/loop-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/magic-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/magic-line.svg new file mode 100644 index 00000000..70442fa7 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/magic-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/markup-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/markup-line.svg new file mode 100644 index 00000000..49b7ab78 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/markup-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-4-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-4-fill.svg new file mode 100644 index 00000000..5d06e79b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-4-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-add-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-add-fill.svg new file mode 100644 index 00000000..21ee2c54 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-add-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-line.svg new file mode 100644 index 00000000..dfdfea1f --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-search-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-search-line.svg new file mode 100644 index 00000000..59d56f45 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/menu-search-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/meteor-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/meteor-line.svg new file mode 100644 index 00000000..fac2b8c5 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/meteor-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/more-2-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/more-2-fill.svg new file mode 100644 index 00000000..e67d22af --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/more-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/node-tree.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/node-tree.svg new file mode 100644 index 00000000..7693acca --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/node-tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/organization-chart.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/organization-chart.svg new file mode 100644 index 00000000..f16aae8d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/organization-chart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/paint-brush-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/paint-brush-line.svg new file mode 100644 index 00000000..e8b93deb --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/paint-brush-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/paint-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/paint-line.svg new file mode 100644 index 00000000..5839c207 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/paint-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/pantone-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/pantone-line.svg new file mode 100644 index 00000000..d93296fe --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/pantone-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/picture-in-picture-exit-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/picture-in-picture-exit-line.svg new file mode 100644 index 00000000..ad5e2f04 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/picture-in-picture-exit-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/planet-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/planet-line.svg new file mode 100644 index 00000000..3bb04682 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/planet-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/play-circle-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/play-circle-line.svg new file mode 100644 index 00000000..af5e178e --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/play-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/play-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/play-line.svg new file mode 100644 index 00000000..c9c6b6eb --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/play-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/plug-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/plug-line.svg new file mode 100644 index 00000000..5e20db98 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/plug-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/pulse-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/pulse-line.svg new file mode 100644 index 00000000..4f8aa2bd --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/pulse-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/pushpin-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/pushpin-line.svg new file mode 100644 index 00000000..b86e5654 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/pushpin-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/question-answer-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/question-answer-fill.svg new file mode 100644 index 00000000..fb6b6fdf --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/question-answer-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/question-answer-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/question-answer-line.svg new file mode 100644 index 00000000..29bc6899 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/question-answer-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/recycle-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/recycle-line.svg new file mode 100644 index 00000000..53988a91 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/recycle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/refresh-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/refresh-line.svg new file mode 100644 index 00000000..ff547244 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/refresh-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/reply-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/reply-fill.svg new file mode 100644 index 00000000..54aade62 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/reply-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/reply-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/reply-line.svg new file mode 100644 index 00000000..e1b88438 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/reply-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/restart-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/restart-fill.svg new file mode 100644 index 00000000..e57e15eb --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/restart-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/robot-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/robot-2-line.svg new file mode 100644 index 00000000..434f3da6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/robot-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/rocket-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/rocket-fill.svg new file mode 100644 index 00000000..ad9a5941 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/rocket-fill.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/ruler-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/ruler-2-line.svg new file mode 100644 index 00000000..cd589354 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/ruler-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/run-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/run-line.svg new file mode 100644 index 00000000..7254f460 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/run-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/save-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/save-2-line.svg new file mode 100644 index 00000000..1536631d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/save-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/save-3-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/save-3-line.svg new file mode 100644 index 00000000..ee5c0d65 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/save-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/seo-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/seo-line.svg new file mode 100644 index 00000000..670c46a8 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/seo-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/settings-3-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/settings-3-line.svg new file mode 100644 index 00000000..dbc30971 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/settings-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/shape-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/shape-fill.svg new file mode 100644 index 00000000..6200ce7a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/shape-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/shapes-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/shapes-line.svg new file mode 100644 index 00000000..b7d77105 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/shapes-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/shut-down-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/shut-down-line.svg new file mode 100644 index 00000000..a8ab6b14 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/shut-down-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/skip-forward-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/skip-forward-line.svg new file mode 100644 index 00000000..6da48dab --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/skip-forward-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/skip-forward-mini-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/skip-forward-mini-line.svg new file mode 100644 index 00000000..03d788ad --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/skip-forward-mini-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/sort-asc.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/sort-asc.svg new file mode 100644 index 00000000..411e658e --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/sort-asc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/sort-desc.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/sort-desc.svg new file mode 100644 index 00000000..85a5a1aa --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/sort-desc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/sound-module-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/sound-module-line.svg new file mode 100644 index 00000000..02b9ddb0 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/sound-module-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/sparkling-2-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/sparkling-2-line.svg new file mode 100644 index 00000000..f9802f57 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/sparkling-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/sparkling-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/sparkling-line.svg new file mode 100644 index 00000000..6a70ce23 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/sparkling-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/arrow.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/arrow.svg new file mode 100644 index 00000000..ba58879a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/error.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/error.svg new file mode 100644 index 00000000..fc950613 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/pause.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/pause.svg new file mode 100644 index 00000000..621b4fd6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/pixel.gif b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/pixel.gif new file mode 100644 index 00000000..5bfd67a2 Binary files /dev/null and b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/pixel.gif differ diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/play.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/play.svg new file mode 100644 index 00000000..73191945 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/preloader.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/preloader.svg new file mode 100644 index 00000000..91a2fe3b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/preloader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/theme.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/theme.svg new file mode 100644 index 00000000..6287d462 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/spotlight/theme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/stack-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/stack-line.svg new file mode 100644 index 00000000..1bd316f6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/stack-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/star-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/star-line.svg new file mode 100644 index 00000000..2455a969 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/star-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/stop-circle-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/stop-circle-line.svg new file mode 100644 index 00000000..25ac41f3 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/stop-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/stop-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/stop-line.svg new file mode 100644 index 00000000..2b44ad70 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/stop-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/t-box-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/t-box-fill.svg new file mode 100644 index 00000000..6b9e7293 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/t-box-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/t-box-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/t-box-line.svg new file mode 100644 index 00000000..cd9a38fe --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/t-box-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/team-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/team-line.svg new file mode 100644 index 00000000..699419d7 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/team-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/terminal-box-fill.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/terminal-box-fill.svg new file mode 100644 index 00000000..776f80ae --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/terminal-box-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/terminal-box-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/terminal-box-line.svg new file mode 100644 index 00000000..e03c93f6 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/terminal-box-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/text.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/text.svg new file mode 100644 index 00000000..00ba6b6d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/trophy-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/trophy-line.svg new file mode 100644 index 00000000..9cb05f0b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/trophy-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/unpin-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/unpin-line.svg new file mode 100644 index 00000000..61f7d33d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/unpin-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/user-smile-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/user-smile-line.svg new file mode 100644 index 00000000..d9608530 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/user-smile-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/variation-settings.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/variation-settings.svg new file mode 100644 index 00000000..baec2dee --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/variation-settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/video-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/video-line.svg new file mode 100644 index 00000000..e2e1c928 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/video-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/vip-diamond-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/vip-diamond-line.svg new file mode 100644 index 00000000..408dd262 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/vip-diamond-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/zoom-in-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/zoom-in-line.svg new file mode 100644 index 00000000..48a29cd8 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/zoom-in-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/zoom-out-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/zoom-out-line.svg new file mode 100644 index 00000000..d85c8f20 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/zoom-out-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-about.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-about.html new file mode 100644 index 00000000..f2b30578 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-about.html @@ -0,0 +1,127 @@ +
+
+
+

Anapnoe UI-UX Core

+
+

Anapnoe UI-UX Core extension leverages a custom-made visual editor and a cutting-edge component library + to facilitate the rapid development of sophisticated Gradio applications. + In addition to its visually appealing design and well-planned layout, this extension + offers several performance enhancements to both the Stable Diffusion web UI and the + Gradio + framework. These optimizations include: +

+
    +
  • Replacing all default Gradio stylesheets in the DOM with an optimized version that promote + better visual coherence across components.
    • +
  • Eliminating inline styles and Svelte classes from the DOM to minimize clutter and improve + efficiency.
    • +
  • Removing unnecessary "img2img Extra Networks" from the DOM to reduce duplicated images and event + listeners.
    • +
  • Eradicating inline event listeners from "txt2img Extra Networks" cards and action buttons.
    • +
  • Applying an event delegation pattern to further streamline the code by consolidating event + handling for "txt2img Extra Networks" cards and action buttons.
    • +
+

+ Although the current optimizations provide significant benefits, they are still applied after the + DOM has been loaded. A more effective approach would be to eliminate these unnecessary elements + entirely from the backend. This is an area for improvement and will be address in the future + releases of + Stable Diffusion web + UI-UX. +

+ +

+ Any extensions that replicate "Extra Network Cards" will not be officially supported. + However, if certain extensions hold significant value for your workflow, you can initiate a discussion. + If the community expresses interest and support for these optimizations, + I will be willing to submit pull requests to the extension's author to implement them. +

+
+
+
+

+ Open Source +

+
+

+ Open source projects play a crucial role in protecting user privacy and security, + advocating for unhindered access to source code, and nurturing a more transparent technology + ecosystem. + By supporting this project through your donation, you'll contribute to its ongoing development + without any compromise + from advertisements or corporate agendas, and ensure that it stays freely accessible, current, and + open to all. +

There is only so much time in a day that a person can otherwise give (Dave Glick). +
+

+
+
+
+

+ Sponsors & Supporters +

+
+

+ Our sponsors and supporters will be prominently featured on a dedicated tab and on the GitHub page, + highlighting their commitment to advancing innovation in development. + As a heartfelt thank you, they'll get early access to all new features and premium add-ons. + +

+ Donate now, and join forces to + create a sustainable realm of open source software that benefits everyone. + +
+

+
+ +
+
+
+

Upcoming add-ons for UI-UX

+
+
+

+ Workspaces UI-UX +

+
+

+ With workspaces extension, you can craft personalized views and arrange them in any way that suits your preferences, + allowing you to tailor-make workflows that cater to your specific needs. +

+ Anapnoe UI-UX default theme +

+ Become a supporter and get early access to Workspaces for UI-UX. +

+
+ + +
+
+

+ Advanced Theme Style configurator [planned] +

+
+

+ A sophisticated theme editor allowing you to personalize icons, fonts, and range sliders. + Tailor the visual experience of the user interface with the Advanced Theme Style configurator. +

+
+
+
+

+ Visual Builder for Gradio Apps [work in progress] +

+
+

+ Introducing a low-code visual editor builder for Gradio Apps. + Create templates and customize Gradio apps without extensive programming knowledge. Drag, drop, design, and deploy - all within a user-friendly interface. + Build anything from simple AI applications to complex enterprise solutions. +

+ Anapnoe Gradio Visual editor +
+
+
+
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html new file mode 100644 index 00000000..d3e2643a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html @@ -0,0 +1,323 @@ +
+
+
+
+ +
+
+ + +
+
+ + + + + +
+
+ + + +
+ + + + + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ + + +
+
+ +
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html new file mode 100644 index 00000000..2a70aef9 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html @@ -0,0 +1,123 @@ +
+
+ + + +
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extensions.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extensions.html new file mode 100644 index 00000000..450e894b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extensions.html @@ -0,0 +1,15 @@ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extra-networks.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extra-networks.html new file mode 100644 index 00000000..7c40249c --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extra-networks.html @@ -0,0 +1,55 @@ +
+
+ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html new file mode 100644 index 00000000..f264df9b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html @@ -0,0 +1,97 @@ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-results.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-results.html new file mode 100644 index 00000000..36a855ab --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-results.html @@ -0,0 +1,51 @@ + +
+
+
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html new file mode 100644 index 00000000..7b56bc4b --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html @@ -0,0 +1,384 @@ +
+
+
+
+ + + + + + +
+
+ + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inpaint options + ▼ +
+
+
+
+
+
+
+
+ Resize mode + ▼ +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-results.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-results.html new file mode 100644 index 00000000..ff6041c3 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-results.html @@ -0,0 +1,65 @@ + +
+
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-model-merger.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-model-merger.html new file mode 100644 index 00000000..d70d6058 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-model-merger.html @@ -0,0 +1,129 @@ + +
+
+ + + +
+
+
+
+ + +
+
+
+ + + +
+
+ + +
+ + + +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+ + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ + + + + + +
+
+
+ + + +
+
+
+
+
+ + + +
+
+ + + + + +
+
+
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-pnginfo.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-pnginfo.html new file mode 100644 index 00000000..f77ab7cb --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-pnginfo.html @@ -0,0 +1,47 @@ +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-quicksettings.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-quicksettings.html new file mode 100644 index 00000000..00b1d172 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-quicksettings.html @@ -0,0 +1,21 @@ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-settings.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-settings.html new file mode 100644 index 00000000..96e4b351 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-settings.html @@ -0,0 +1,35 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-sponsors.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-sponsors.html new file mode 100644 index 00000000..fe35403c --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-sponsors.html @@ -0,0 +1,13 @@ +
+
+
+

+ 💎 Sponsors +

+ +

+ 🥇 Supporters +

+
+
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-theme.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-theme.html new file mode 100644 index 00000000..73acf38a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-theme.html @@ -0,0 +1,22 @@ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-results.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-results.html new file mode 100644 index 00000000..aeeb6005 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-results.html @@ -0,0 +1,17 @@ + +
+
+
+ +
+
+
+
+
+
+
+
+ + +
+ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html new file mode 100644 index 00000000..68d40ffa --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html @@ -0,0 +1,302 @@ +
+
+
+
+ + + + + + +
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ + + +
+
+
+ +
+
\ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-results.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-results.html new file mode 100644 index 00000000..0a7ae429 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-results.html @@ -0,0 +1,66 @@ + +
+ +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js new file mode 100644 index 00000000..99f4185a --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js @@ -0,0 +1,1213 @@ +//var orig_all_gallery_buttons = window.all_gallery_buttons; +window.all_gallery_buttons = function(){ + //orig_all_gallery_buttons(); + var tabitem = gradioApp().querySelector('#main-nav-bar button.active')?.getAttribute('tabitemid'); + var visibleGalleryButtons = []; + if(tabitem){ + //console.log(tabitem, allGalleryButtons); + var allGalleryButtons = gradioApp().querySelectorAll(tabitem+' .gradio-gallery .thumbnails > .thumbnail-small'); + allGalleryButtons?.forEach(function(elem) { + if (elem.parentElement.offsetParent) { + visibleGalleryButtons.push(elem); + } + }); + } + return visibleGalleryButtons; +} + +window.extraNetworksSearchButton = function(tabs_id, e) { + var button = e.target; + const attr = e.target.parentElement.parentElement.getAttribute("search-field"); + var searchTextarea = gradioApp().querySelector(attr); + //console.log(button, searchTextarea) + var text = button.classList.contains("search-all") ? "" : button.textContent.trim(); + searchTextarea.value = text; + window.updateInput(searchTextarea); +} + +window.imageMaskResize = function(){ + // override function empty we dont need any fix here +} + +window.extraNetworksEditUserMetadata = function(event, tabname, extraPage, cardName) { + //var id = tabname + '_' + extraPage + '_edit_user_metadata'; + var tid = 'txt2img_' + extraPage + '_edit_user_metadata'; + var editor = extraPageUserMetadataEditors[tid]; + if (!editor) { + editor = {}; + editor.page = gradioApp().getElementById(tid); + editor.nameTextarea = gradioApp().querySelector("#" + tid + "_name" + ' textarea'); + editor.button = gradioApp().querySelector("#" + tid + "_button"); + extraPageUserMetadataEditors[tid] = editor; + } + + editor.nameTextarea.value = cardName; + updateInput(editor.nameTextarea); + + editor.button.click(); + + popup(editor.page); + + //event.stopPropagation(); +} + +async function getContributors(repoName, page = 1) { + let request = await fetch(`https://api.github.com/repos/${repoName}/contributors?per_page=100&page=${page}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + } + }); + + // print data from the fetch on screen + let contributorsList = await request.json(); + return contributorsList; +} + +async function getAllContributorsRecursive(repoName, page = 1, allContributors = []) { + const list = await getContributors(repoName, page); + allContributors = allContributors.concat(list); + + if (list.length === 100) { + return getAllContributorsRecursive(repoName, page + 1, allContributors); + } + + // The base case: when the list is empty, return allContributors + return allContributors; +} + + +localStorage.setItem('UiUxReady', "false"); +localStorage.setItem('UiUxComplete', "false"); +const default_ext_path = './file=extensions-builtin/anapnoe-sd-uiux/html/templates/'; +const default_libs_path = './file=extensions-builtin/anapnoe-sd-uiux/html/libs/'; +let total = 0; +let active_main_tab;// = document.querySelector("#tab_txt2img");//null +let loggerUiUx; +const split_instances = []; +const anapnoe_app_id = "#anapnoe_app"; + + +function getRootContainer() { + return document.getElementById('tab_anapnoe_sd_uiux_core'); +} + +function mainTabs(element, tab) { + if(active_main_tab){ + active_main_tab.style.display = 'none'; + } + const ntab = document.querySelector(tab); + if(ntab){ + ntab.style.display = 'block'; + //console.log(tab, ntab); + active_main_tab = ntab; + + } + +} + +function setAttrSelector(parent_elem, content_div, count, index, length) { + + //const t = parent_elem.getAttribute("data-timeout"); + //const delay = t ? parseInt(t) : 0; + + //setTimeout(() => { + + const mcount = count % 2; + //const parent_elem = this.el; + + const s = parent_elem.getAttribute("data-selector"); + const sp = parent_elem.getAttribute("data-parent-selector"); + + + let target_elem; + + switch (mcount) { + case 0: + target_elem = document.querySelector(`${sp} ${s}`); + break; + case 1: + target_elem = content_div.querySelector(`${s}`); + break; + } + + if (target_elem && parent_elem) { + parent_elem.append(target_elem); + total += 1; + console.log("register | Ref", index, sp, s); + const d = parent_elem.getAttribute('droppable'); + + if (d) { + const childs = Array.from(parent_elem.children); + //console.log("droppable", target_elem, parent_elem, childs); + childs.forEach((c) => { + if (c !== target_elem) { + if (target_elem.className.indexOf('gradio-accordion') !== -1) { + target_elem.children[2].append(c); + } else { + target_elem.append(c); + } + } + }); + } + + const hb = parent_elem.getAttribute("show-button"); + if(hb){document.querySelector(hb)?.classList.remove("hidden");} + + } else if (count < 4) { + + const t = parent_elem.getAttribute("data-timeout"); + const delay = t ? parseInt(t) : 500; + + setTimeout(() => { + console.log( count + 1, "retry | ", delay, " | Ref", index, sp, s); + setAttrSelector(parent_elem, content_div, count + 1, index, length); + }, delay); + + } else { + console.log("error | Ref", index, sp, s); + total += 1; + + } + + if(total === length){ + console.log("Runtime components initilized"); + localStorage.setItem('UiUxReady', true); + } + + //}, delay ); + +} + +function testpopup(){ + const content_div = document.querySelector('#popup_tabitem'); + //const meta_id = document.querySelector('.global-popup-inner > div')?.id; + content_div.querySelectorAll(`.portal`).forEach((el, index, array) => { + /* + const childs = Array.from(el.children); + childs.forEach((c) => { + const ac = c.getAttribute("meta-Id"); + if(ac){ + if(ac === meta_id){ + c.style.display = ""; + el.style.display = ""; + + }else{ + c.style.display = "none"; + if(childs.length === 1){ + el.style.display = "none"; + } + } + }else{ + c.setAttribute("meta-id", meta_id); + } + }); + */ + setAttrSelector(el, content_div, 0, index, array.length); + }); + + /* + content_div.querySelectorAll(`.ae-popup .edit-user-metadata-buttons button`).forEach((el) => { + } + */ +} + +function createButtons4Extensions() { + + const other_extensions = document.querySelector(`#other_extensions`); + const other_views = document.querySelector(`#split-left`); + //const other_views = document.querySelector(`#no-split-app`); + document.querySelectorAll(`#tabs > .tabitem`).forEach((c) => { + const cid = c.id; + const nid = cid.split('tab_')[1]; + if( cid !== "tab_txt2img" && + cid !== "tab_img2img" && + cid !== "tab_extras" && + cid !== "tab_pnginfo" && + cid !== "tab_train" && + cid !== "tab_modelmerger" && + cid !== "tab_settings" && + cid !== "tab_extensions" && + cid !== "tab_ui_theme" && + cid !== "tab_anapnoe_dock" && + cid !== "tab_anapnoe_sd_uiux_core") + + { + //tab_openpose_editor + const temp = document.createElement('div'); + temp.innerHTML= ` + `; + const btn = temp.firstElementChild; + other_extensions.append(btn); + //console.log(other_extensions, btn); + + temp.innerHTML= ` +
+
+
+
`; + + const view = temp.firstElementChild; + //console.log(other_views, view); + other_views.append(view); + } + + }); + +} + +function setupExtraNetworksSearchSort(){ + + const applyFilter = function(e) { + const search_term = e.target.value.toLowerCase(); + const cards = e.target.getAttribute("data-target"); + //console.log(search_term, cards ) + gradioApp().querySelectorAll(cards).forEach(function(elem) { + //const text = elem.querySelector(".search_term").textContent;//elem.getAttribute("data-path").toLowerCase().split("\\").join("/"); + const text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase(); + let visible = text.indexOf(search_term) != -1; + if (search_term.length < 3) { + visible = true; + } + elem.style.display = visible ? "" : "none"; + }); + }; + + document.querySelectorAll('.search_extra_networks').forEach((el) => { + el.addEventListener("input", applyFilter); + }) + + function applySort(el, sortKey) { + + function comparator(cardA, cardB) { + var a = cardA.getAttribute(sortKey); + var b = cardB.getAttribute(sortKey); + if (!isNaN(a) && !isNaN(b)) { + return parseInt(a) - parseInt(b); + } + return (a < b ? -1 : (a > b ? 1 : 0)); + } + + const cards_selector = el.getAttribute("data-target"); + const cards = gradioApp().querySelectorAll(cards_selector); + const cards_parent = cards[0].parentElement; + const cardsArray = Array.from(cards); + let sorted = cardsArray.sort(comparator); + + const reverse_button = el.nextElementSibling;//closest(".reverse-order"); + const reverse = reverse_button.className.indexOf("active") !== -1; + if (reverse) { + sorted.reverse(); + } + sorted.forEach(e => cards_parent.appendChild(e)); + + } + + document.querySelectorAll('.extra_networks_order_by').forEach((el) => { + el.addEventListener('change', function(e) { + applySort(e.target, this.value); + //console.log('You selected: ', this.value); + }); + el.nextElementSibling.addEventListener('click', function(e) { + applySort(el, el.value); + console.log('You selected: ', el.value); + }); + }) + +} + +function updateExtraNetworksCards(el){ + + console.log("Starting optimizations for", el.id); + el.querySelectorAll(".card, .card-button").forEach((card) => { + const onclick_data = card.getAttribute("onClick"); + card.setAttribute("data-apply", onclick_data); + card.removeAttribute("onClick"); + if(card.getAttribute("data-name")){ + console.log("Remove EventListener", card.getAttribute("data-name")) + }else{ + const card_closest = card.closest(".card"); + console.log("Remove EventListener", `${card_closest.getAttribute("data-name")} - ${card.getAttribute("title")}`) + } + + }) + + console.log("Attach EventListener", el.id); + el.addEventListener("click", function(e) { + const ctarget = e.target; + if(ctarget && ctarget.className.indexOf("card") !== -1) { + let data_apply = ctarget.getAttribute("data-apply"); + if(!data_apply){ + const onclick_data = ctarget.getAttribute("onClick"); + if(onclick_data){ + ctarget.setAttribute("data-apply", onclick_data); + ctarget.removeAttribute("onClick"); + } + } + + const tabkey = active_main_tab.id.split("tab_")[1]; + if(tabkey === "img2img"){ + data_apply = data_apply?.replace("txt2img", "img2img"); + }else{ + data_apply = data_apply?.replace("img2img", "txt2img"); + } + + ctarget.setAttribute("onClick", data_apply ); + ctarget.click(); + ctarget.removeAttribute("onClick"); + + if(ctarget.className.indexOf("card-button") !== -1){ + data_apply = data_apply?.replace("img2img", "txt2img"); + popup_trigger.click(); + testpopup(); + } + + } + }) + + document.querySelectorAll("#txt2img_styles_edit_button, #img2img_styles_edit_button").forEach((elm) => { + elm.addEventListener("click", function(e) { + popup_trigger.click(); + testpopup(); + }) + }) + + + +} + +function setupAnimationEventListeners(){ + document.addEventListener('animationend', function (e) { + if (e.animationName === 'fade-out') { + e.target.classList.add('hidden'); + } + }); + + document.addEventListener('animationstart', function (e) { + if (e.animationName === 'fade-out') { + if (e.target.className.indexOf('notransition') !== -1) { + e.target.classList.add('hidden'); + } + } + if (e.animationName === 'fade-in') { + e.target.classList.remove('hidden'); + } + }); +} + +function showContributors(){ + const contributors_btn = document.querySelector('#contributors'); + const contributors_view = document.querySelector('#contributors_tabitem'); + const temp = document.createElement('div'); + temp.id = 'contributors_grid'; + temp.innerHTML = `Kindly allow us a moment to retrieve the contributors. + We're grateful for the many individuals who have generously put their time and effort to make this possible.`; + contributors_view.append(temp); + + contributors_btn.addEventListener('click', function(e) { + //console.log(getAllContributors("anapnoe/stable-diffusion-webui-ux")); + if(!contributors_btn.getAttribute("data-visited")){ + contributors_btn.setAttribute("data-visited", "true"); + const promise = getAllContributorsRecursive("anapnoe/stable-diffusion-webui-ux"); + promise.then(function (result) { + //console.log(result) + temp.innerHTML = ""; + for (let i = 0; i < result.length; i++) { + const login = result[i].login; + const html_url = result[i].html_url; + const avatar_url = result[i].avatar_url; + temp.innerHTML += ` + +
+
+ ${login} +
+ `; + } + }) + } + }); +} + +function onUiUxReady(content_div){ + + const interval = setInterval(() => { + const isUiUxReady = localStorage.getItem('UiUxReady'); + if( isUiUxReady === "true"){ + clearInterval(interval); + + const logger_screen = document.querySelector("#logger_screen"); + if(logger_screen){ + const asideconsole = document.querySelector("#layout-console-log"); + asideconsole.append(loggerUiUx); + logger_screen.remove(); + } + + + console.log("Starting optimizations for Extra Networks"); + /* content_div.querySelector("#img2img_textual_inversion_cards_html")?.remove(); + content_div.querySelector("#img2img_checkpoints_cards_html")?.remove(); + content_div.querySelector("#img2img_hypernetworks_cards_html")?.remove(); + content_div.querySelector("#img2img_lora_cards_html")?.remove(); + + console.log("Remove element #img2img_textual_inversion_cards_html"); + console.log("Remove element #img2img_checkpoints_cards_html"); + console.log("Remove element #img2img_hypernetworks_cards_html"); + console.log("Remove element #img2img_lora_cards_html"); */ + + content_div.querySelectorAll(".extra-network-cards").forEach((el) => { + updateExtraNetworksCards(el); + }); + + console.log("Finishing optimizations for Extra Networks"); + + const versions = gradioApp().querySelector(".versions"); + console.log(versions.innerHTML); + + setupExtraNetworksSearchSort(); + + const ch_input = document.querySelector ("#setting_sd_model_checkpoint .secondary-wrap input"); + //const hash_target = document.querySelector('#sd_checkpoint_hash'); + //const hash_old_value = hash_target.textContent; + const hash_old_value = ch_input.value; + let oldcard = document.querySelector(`#txt2img_checkpoints_cards .card[data-apply*="${hash_old_value}"]`); + if(oldcard){ + oldcard?.classList.add("selected"); + console.log("Checkpoint name:", oldcard.getAttribute("data-name"), "
"); + } + + const ch_footer_preload = document.querySelector("#txt2img_checkpoints_main_footer .model-preloader"); + const ch_footer_selected = document.querySelector("#txt2img_checkpoints_main_footer .model-selected"); + + const ch_preload = document.querySelector ("#setting_sd_model_checkpoint .wrap"); + ch_footer_preload.append(ch_preload); + + const preload_model_observer = new MutationObserver(function (mutations) { + mutations.forEach(function (m) { + if(oldcard){ + const hash_target = document.querySelector('#sd_checkpoint_hash'); + const hash_value = hash_target.textContent; + const card = document.querySelector(`#txt2img_checkpoints_cards .card[data-apply*="${hash_value}"]`); + if(card){ + if(oldcard !== card){ + oldcard.classList.remove("selected"); + card.classList.add("selected"); + oldcard = card; + ch_footer_selected.textContent = ch_input.value; + console.log("Checkpoint:", ch_input.value) + } + } + } + }); + }); + + preload_model_observer.observe(ch_preload, { childList: true, subtree: false }); + + + setupGenerateObservers(); + + localStorage.setItem('UiUxComplete', true); + + //const main_nav_content = document.querySelector('#main_nav_content'); + //const sidebar_tabs = document.querySelector('#sidebar_tabs'); + //main_nav_content.append(sidebar_tabs); + showContributors() + + + + + + } + }, 500); + + +} + +function setupGenerateObservers(){ + + const keys = ["#txt2img", "#img2img"]; + keys.forEach((key) => { + + const tib = document.querySelector(key+'_interrupt'); + const tgb = document.querySelector(key+'_generate'); + const ti = tib.closest('.portal'); + const tg = tgb.closest('.ae-button'); + const ts = document.querySelector(key+'_skip').closest('.portal'); + const loop = document.querySelector(key+'_loop'); + + tib.addEventListener("click", function () { + loop.classList.add('stop'); + }); + + const gen_observer = new MutationObserver(function (mutations) { + mutations.forEach(function (m) { + + if (tib.style.display === 'none') { + + if (loop.className.indexOf('stop') !== -1 || loop.className.indexOf('active') === -1) { + loop.classList.remove('stop'); + ti.classList.add('disable'); + ts.classList.add('disable'); + tg.classList.remove('active'); + } else if (loop.className.indexOf('active') !== -1) { + tgb.click(); + } + } else { + ti.classList.remove('disable'); + ts.classList.remove('disable'); + tg.classList.add('active'); + } + }); + }); + + gen_observer.observe(tib, { attributes: true, attributeFilter: ['style'] }); + }); + +} + +function initDefaultComponents(content_div) { + const anapnoe_app = document.querySelector(anapnoe_app_id); + content_div.querySelectorAll(`div.split`).forEach((el) => { + + let id = el.id; + let nid = content_div.querySelector(`#${id}`); + + const dir = nid?.getAttribute('direction') === 'vertical' ? 'vertical' : 'horizontal'; + const gutter = nid?.getAttribute('gutterSize') || '8'; + + const containers = content_div.querySelectorAll(`#${id} > div.split-container`); + const len = containers.length; + const r = 100 / len; + const ids = [], isize = [], msize = []; + + for (let j = 0; j < len; j++) { + const c = containers[j]; + ids.push(`#${c.id}`); + const ji = c.getAttribute('data-initSize'); + const jm = c.getAttribute('data-minSize'); + isize.push(ji ? parseInt(ji) : r); + msize.push(jm ? parseInt(jm) : Infinity); + } + + console.log("Split component", ids, isize, msize, dir, gutter); + + split_instances[id] = Split(ids, { + sizes: isize, + minSize: msize, + direction: dir, + gutterSize: parseInt(gutter), + snapOffset: 0, + dragInterval: 1, + //expandToMin: true, + elementStyle: function (dimension, size, gutterSize) { + //console.log(dimension, size, gutterSize); + return { + 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)', + } + }, + gutterStyle: function (dimension, gutterSize) { + return { + 'flex-basis': gutterSize + 'px', + 'min-width': gutterSize + 'px', + 'min-height': gutterSize + 'px', + } + }, + }); + + }); + + //console.log(split_instances) + + content_div.querySelectorAll(`.portal`).forEach((el, index, array) => { + setAttrSelector(el, content_div, 0, index, array.length); + }); + + content_div.querySelectorAll(`.accordion-bar`).forEach((c) => { + const acc = c.parentElement; + const acc_split = acc.closest('.split-container'); + + let ctrg = c; + const atg = acc.getAttribute('iconTrigger'); + if (atg) { + const icn = content_div.querySelector(atg); + if (icn) { + ctrg = icn; + c.classList.add('pointer-events-none'); + } + } + + if (acc.className.indexOf('accordion-vertical') !== -1 && acc_split.className.indexOf('split') !== -1) { + + acc.classList.add('expand'); + //const acc_gutter = acc_split.previousElementSibling; + const acc_split_id = acc_split.parentElement.id; + const split_instance = split_instances[acc_split_id]; + acc_split.setAttribute('data-sizes', JSON.stringify(split_instance.getSizes())); + + ctrg?.addEventListener("click", () => { + acc.classList.toggle('expand'); + //acc_gutter.classList.toggle('pointer-events-none'); + if (acc_split.className.indexOf('v-expand') !== -1) { + acc_split.classList.remove('v-expand'); + split_instance.setSizes(JSON.parse(acc_split.getAttribute('data-sizes'))) + } else { + acc_split.classList.add('v-expand'); + let sizes = split_instance.getSizes(); + acc_split.setAttribute('data-sizes', JSON.stringify(sizes)); + + //console.log(sizes) + sizes[sizes.length-1] = 0; + sizes[sizes.length-2] = 100; + + const padding = parseFloat(window.getComputedStyle(c, null).getPropertyValue('padding-left')) * 2; + acc_split.style.minWidth = c.offsetWidth+padding+"px"; + + split_instance.setSizes(sizes) + } + }); + + } else { + ctrg?.addEventListener("click", () => { acc.classList.toggle('expand') }); + } + }); + + + function callToAction(el, tids, pid) { + + const acc_bar = el.closest(".accordion-bar"); + if (acc_bar) { + const acc = acc_bar.parentElement; + if (acc.className.indexOf('expand') === -1) { + let ctrg = acc_bar; + const atg = acc.getAttribute('iconTrigger'); + if (atg) { + const icn = content_div.querySelector(atg); + if (icn) { + ctrg = icn; + } + } + ctrg.click(); + } + } + + const txt = el.querySelector('span')?.innerHTML.toLowerCase(); + //console.log(txt, pid) + if (txt && pid) { + document.querySelectorAll(`${pid} .tab-nav button, [data-parent-selector="${pid}"] .tab-nav button`).forEach(function (elm) { + /* console.log(elm.innerHTML, txt) */ + if (elm.innerHTML.toLowerCase().indexOf(txt) !== -1) { + elm.click(); + } + }); + } + } + + content_div.querySelectorAll(`.xtabs-tab`).forEach((el) => { + + el.addEventListener('click', () => { + const tabParent = el.parentElement; + const tgroup = el.getAttribute("tabGroup"); + const pid = el.getAttribute("data-click"); + + function hideActive(tab) { + tab.classList.remove('active'); + const tids = tab.getAttribute("tabItemId"); + anapnoe_app.querySelectorAll(tids).forEach((tabItem) => { + //tabItem.classList.add('hidden'); + tabItem.classList.remove('fade-in'); + tabItem.classList.add('fade-out'); + }); + } + + if (tgroup) { + anapnoe_app.querySelectorAll(`[tabGroup="${tgroup}"]`) + .forEach((tab) => { + if (tab.className.indexOf('active') !== -1) { + hideActive(tab); + } + }); + + } else if (tabParent) { + const tabs = [].slice.call(tabParent.children); + tabs.forEach((tab) => { + if (tab.className.indexOf('active') !== -1) { + hideActive(tab); + } + }); + } + + const tids = el.getAttribute("tabItemId"); + anapnoe_app.querySelectorAll(tids).forEach((tabItem) => { + //tabItem.classList.remove('hidden'); + tabItem.classList.remove('fade-out'); + tabItem.classList.add('fade-in'); + //console.log('tab', tids, tabItem); + }); + + el.classList.add('active'); + callToAction(el, tids, pid); + + + }); + + const active = el.getAttribute("active"); + if (!active) { + const tids = el.getAttribute("tabItemId"); + anapnoe_app.querySelectorAll(tids).forEach((tabItem) => { + //tabItem.classList.add('hidden'); + tabItem.classList.remove('fade-in'); + tabItem.classList.add('fade-out'); + }); + } + + }); + + content_div.querySelectorAll(`.xtabs-tab[active]`).forEach((el) => { + el.classList.add('active'); + const tids = el.getAttribute("tabItemId"); + const pid = el.getAttribute("data-click"); + anapnoe_app.querySelectorAll(tids).forEach((tabItem) => { + //tabItem.classList.remove('hidden'); + tabItem.classList.remove('fade-out'); + tabItem.classList.add('fade-in'); + }); + callToAction(el, tids, pid); + //console.log('tab', tids, el); + }); + + content_div.querySelectorAll(`.ae-button`).forEach((el) => { + const toggle = el.getAttribute("toggle"); + const active = el.getAttribute("active"); + const input = el.querySelector('input'); + + if (input) { + if (input.checked === true && !active) { + input.click(); + } else if (input.checked === false && active) { + input.click(); + } + } + + if (active) { + el.classList.add('active'); + } else { + el.classList.remove('active'); + } + + + if (toggle) { + el.addEventListener('click', (e) => { + const input = el.querySelector('input'); + if (input) { + input.click(); + if (input.checked === true) { + el.classList.add('active'); + } else if (input.checked === false) { + el.classList.remove('active'); + } + } else { + el.classList.toggle('active'); + } + }); + } + + const adc = el.getAttribute("data-click"); + if(adc){ + el.addEventListener('click', (e) => { + + if(el.className.indexOf("refresh-extra-networks") !== -1){ + const ctemp = el.closest(".template"); + const ckey = ctemp?.getAttribute("key") || "txt2img"; + //console.log(ckey); + setTimeout(() => { + const tempnet = document.querySelector(`#txt2img_temp_tabitem #${ckey}_cards`); + if(tempnet){ + ctemp.querySelector(".extra-network-cards")?.remove(); + ctemp.querySelector(".extra-network-subdirs")?.remove(); + ctemp.querySelectorAll(`.portal`).forEach((el, index, array) => { + setAttrSelector(el, ctemp, 0, index, array.length); + }); + updateExtraNetworksCards(ctemp); + } + }, 1000); + + } + + //}else{ + document.querySelectorAll(adc).forEach((el) => { + el.click(); + }) + //} + }) + } + + }); + + // step ticks for performant input range + function ui_show_range_ticks(value, interactive) { + if (value) { + const range_selectors = "input[type='range']"; + //const range_selectors = "[id$='_clone']:is(input[type='range'])"; + gradioApp() + .querySelectorAll(range_selectors) + .forEach(function (elem) { + let spacing = (elem.step / (elem.max - elem.min)) * 100.0; + let tsp = "max(3px, calc(" + spacing + "% - 1px))"; + let fsp = "max(4px, calc(" + spacing + "% + 0px))"; + var style = elem.style; + style.setProperty( + "--ae-slider-bg-overlay", + "repeating-linear-gradient( 90deg, transparent, transparent " + + tsp + + ", var(--ae-input-border-color) " + + tsp + + ", var(--ae-input-border-color) " + + fsp + + " )" + ); + }); + } else if (interactive) { + gradioApp() + .querySelectorAll("input[type='range']") + .forEach(function (elem) { + var style = elem.style; + style.setProperty("--ae-slider-bg-overlay", "transparent"); + }); + } + } + /* + gradioApp().querySelector("#setting_ui_show_range_ticks input").addEventListener("click", function (e) { + ui_show_range_ticks(e.target.checked, true); + }); + ui_show_range_ticks(opts.ui_show_range_ticks); + */ + ui_show_range_ticks(true); + + // try to attach Logger Screen to main before full UIUXReady + const asideconsole = document.querySelector("#layout-console-log"); + asideconsole.append(loggerUiUx); + document.querySelector("#logger_screen")?.remove(); + + +} + +function setupOnLoadResources() { + + const content_div = document.querySelector("#anapnoe_app"); + gradioApp().insertAdjacentElement('afterbegin', content_div); + + active_main_tab = document.querySelector("#tab_txt2img"); + createButtons4Extensions(); + setupAnimationEventListeners(); + + //const tempDiv = document.createElement('div'); + const initSplitLib = function () { + initDefaultComponents(content_div); + onUiUxReady(content_div); + } + + const script = document.createElement('script'); + script.id = 'splitjs-main'; + script.setAttribute("data-scope", "#anapnoe_app"); + script.onload = initSplitLib; + script.src = 'https://unpkg.com/split.js/dist/split.js'; + + content_div.appendChild(script); + +} + +function removeStyleAssets(){ + + //console.log("Starting optimizations for Extra Networks"); + console.log("Starting optimizations"); + document.querySelector("#img2img_textual_inversion_cards_html")?.remove(); + document.querySelector("#img2img_checkpoints_cards_html")?.remove(); + document.querySelector("#img2img_hypernetworks_cards_html")?.remove(); + document.querySelector("#img2img_lora_cards_html")?.remove(); + + console.log("Remove element #img2img_textual_inversion_cards_html"); + console.log("Remove element #img2img_checkpoints_cards_html"); + console.log("Remove element #img2img_hypernetworks_cards_html"); + console.log("Remove element #img2img_lora_cards_html"); + + document.querySelectorAll(` + [rel="stylesheet"][href*="/assets/"], + [rel="stylesheet"][href*="theme.css"], + [rel="stylesheet"][href*="file=style.css"]` + ).forEach((c) => { + c.remove(); + //loggerUiUx.innerHTML = `Remove stylesheets ${c.getAttribute("href")}`; + console.log("Remove stylesheet", c.getAttribute("href")); + + }); + + const styler = document.querySelectorAll('.styler, [class*="svelte"]:not(input)'); + const count = styler.length; + let s = 0; + styler.forEach((c) => { + if(c.style.display !== "none" && c.style.display !== "block"){ + //if(c.className.indexOf('hidden') === -1 && c.className.indexOf('hide') === -1){ + c.removeAttribute("style"); + s++; + //} + } + + [...c.classList].filter(c => { + return c.match(/^svelte.*/) + }).forEach(e => { + c.classList.remove(e) + }); + + }); + //loggerUiUx.innerHTML = `Remove inline styles from DOM selectors:${count} removed:${s}`; + console.log("Remove inline styles from DOM", "Total Selectors:", count, "Removed Selectors:", s); + console.log("Finishing optimizations"); + //console.log("Loading template files"); + templateData(); +} + +function getNestedTemplates(container) { + const nestedData = []; + container.querySelectorAll(`.template:not([status])`).forEach((el, j) => { + //console.log(el, j) + const obj = {}; + const url = el.getAttribute('url'); + if(url){ + obj.url = url; + }else{ + obj.url = default_ext_path; + } + const key = el.getAttribute('key'); + if(key){ + obj.key = key; + } + const template = el.getAttribute('template'); + if(template){ + obj.template = `${template}.html`; + }else{ + obj.template = `${el.id}.html`; + } + obj.id = el.id; + nestedData.push(obj); + }); + + return nestedData; +} + +function loadCurrentTemplate(data, i, callback) { + const curr_data = data[i]; + const xmlHttp = new XMLHttpRequest(); + const next = i < data.length; + let target; + + if(next){ + + if(curr_data?.parent){ + target = curr_data.parent; + }else if(curr_data?.id){ + target = document.querySelector(`#${curr_data.id}`); + } + + if(target){ + + xmlHttp.onreadystatechange = function () { + + if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { + let tempDiv = document.createElement('div'); + if(curr_data.key){ + const filtered = xmlHttp.responseText.replace(/\s*\{\{.*?\}\}\s*/g, curr_data.key); + tempDiv.innerHTML = filtered; + }else{ + tempDiv.innerHTML = xmlHttp.responseText; + } + + const nestedData = getNestedTemplates(tempDiv); + if(nestedData.length > 0){ + data = data.concat(nestedData); + } + + //console.log(data) + target.setAttribute("status", "true"); + target.append(tempDiv.firstElementChild); + + loadCurrentTemplate(data, i+1, callback); + + }else if (xmlHttp.readyState == 4 && xmlHttp.status == 404) { + target.setAttribute("status", "error"); + loadCurrentTemplate(data, i+1, callback) + } + }; + + const url = `${curr_data.url}${curr_data.template}`; + console.log("Loading template", url); + xmlHttp.open("GET", url, true); // true for asynchronous + xmlHttp.send(null); + + } + + }else{ + //console.log("InitScripts") + //loggerUiUx.innerHTML = `Finished`; + console.log("Template files merged successfully"); + console.log("Init runtime components"); + callback(); + //setupOnLoadResources(); + + } + + + +} + +function templateData() { + + const path = default_ext_path; + const data = [ + { + url: path, + template:'template-app-root.html', + parent: getRootContainer() + } + ]; + + loadCurrentTemplate(data, 0, setupOnLoadResources); + +} + + +function setupLogger() { + + const tempDiv = document.createElement('div'); + tempDiv.id = "logger_screen"; + tempDiv.style = ` + position: fixed; + inset: 0; + background-color: black; + z-index: 99999; + display: flex; + flex-direction: column; + overflow:auto; + `; + + loggerUiUx = document.createElement('div'); + loggerUiUx.id = "logger"; + tempDiv.append(loggerUiUx); + document.body.append(tempDiv); + + (function (logger) { + console.old = console.log; + console.log = function () { + var output = "", arg, i; + + output += ` +
${new Date().toLocaleString().replace(',','')}`; + for (i = 0; i < arguments.length; i++) { + arg = arguments[i]; + const argstr = arg.toString().toLowerCase(); + let acolor = ""; + if(argstr.indexOf("remove") !== -1 || argstr.indexOf("error") !== -1){ + acolor += " log-remove" + }else if(argstr.indexOf("loading") !== -1 + || argstr.indexOf("| ref") !== -1 + || argstr.indexOf("initial") !== -1 + || argstr.indexOf("optimiz") !== -1 + || argstr.indexOf("python") !== -1 + || argstr.indexOf("success") !== -1){ + acolor += " log-load"; + }else if(argstr.indexOf("[") !== -1){ + acolor += " log-object"; + } + + if(arg.toString().indexOf(".css") !== -1 || arg.toString().indexOf(".html") !== -1 ){ + acolor += " log-url"; + }else if(arg.toString().indexOf("\n") !== -1 ){ + output += "
" + } + + output += ` + `; + if ( + typeof arg === "object" && + typeof JSON === "object" && + typeof JSON.stringify === "function" + ) { + output += JSON.stringify(arg); + } else { + output += arg; + } + + output += " "; + } + + logger.innerHTML += output + "
"; + console.old.apply(undefined, arguments); + }; + })(document.getElementById("logger")); + + console.log( + '\n',"╔═╗╔═╦╦═╗╔═╦═╦╦═╦═╗", + '\n',"║╬╚╣║║║╬╚╣╬║║║║╬║╩╣", + '\n',"╚══╩╩═╩══╣╔╩╩═╩═╩═╝", + '\n',"─────────╚╝" + ); + + console.log("Initialize Anapnoe UI/UX runtime engine version 0.0.1"); + console.log(navigator.userAgent); + + const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); + if(isFirefox){ + console.log("Go to the Firefox about:config page, then search and toggle layout. css.has-selector. enabled") + } + + + let link = document.querySelector("link[rel~='icon']"); + if (!link) { + link = document.createElement('link'); + link.rel = 'icon'; + document.head.appendChild(link); + } + link.href = './file=extensions-builtin/anapnoe-sd-uiux/html/favicon.svg'; + + + + + removeStyleAssets(); + +} + +/* +function observeGradioInit() { + const observer = new MutationObserver(() => { + const block = gradioApp().querySelector("#tab_anapnoe_sd_uiux_core"); + //const t = gradioApp().querySelector("#txt2img_textual_inversion_cards_html .card:last-child"); + //const c = gradioApp().querySelector("#txt2img_checkpoints_cards_html .card:last-child"); + //const h = gradioApp().querySelector("#txt2img_hypernetworks_cards_html > div:first-child"); + //const l = gradioApp().querySelector("#txt2img_lora_cards_html .card:last-child"); + if (block) { + //if (block && t && c && h && l) { + observer.disconnect(); + setTimeout(() => { + removeStyleAssets(); + }, 1000); + } + }); + observer.observe(gradioApp(), { childList: true, subtree: true }); +} +*/ + +onUiLoaded(function() { + setupLogger(); +}); + +/* document.addEventListener("DOMContentLoaded", () => { + setupLogger(); + observeGradioInit(); +}); */ \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py new file mode 100644 index 00000000..c4782a03 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py @@ -0,0 +1,111 @@ +import os +import shutil +from pathlib import Path +import gradio as gr +import modules.scripts as scripts +from modules import script_callbacks, shared +from datetime import datetime + +basedir = scripts.basedir() +html_folder = os.path.join(basedir, "html") + +layouts_folder = os.path.join(basedir, "layouts") +javascript_folder = os.path.join(basedir, "javascript") + +def get_files(folder, file_filter=[], file_list=[], split=False): + file_list = [file_name if not split else os.path.splitext(file_name)[0] for file_name in os.listdir(folder) if os.path.isfile(os.path.join(folder, file_name)) and file_name not in file_filter] + return file_list + +html = """ + + +

My First JavaScript

+ +
+ + +""" + +scripts = """ +async () => { + // set testFn() function on globalThis, so you html onlclick can access it + globalThis.testFn = () => { + document.getElementById('demo').innerHTML = "Hello" + } +} +""" + +# with gr.Blocks() as demo: + # input_mic = gr.HTML(html) + # out_text = gr.Textbox() + # # run script function on load, + # demo.load(None,None,None,_js=scripts) +# static_dir = Path('./static') +# static_dir.mkdir(parents=True, exist_ok=True) + +# def predict(text_input): + # file_name = f"{datetime.utcnow().strftime('%s')}.html" + # file_path = html_folder / file_name + # print(file_path) + # with open(file_path, "w") as f: + # f.write(f""" + # + # + #
+ #

Hello {text_input} From Gradio Iframe

+ #

Filename: {file_name}

+ # + # """) + # iframe = f"""""" + # link = f'{file_name}' + # return link, iframe + + + +def on_ui_tabs(): + + with gr.Blocks(analytics_enabled=False) as anapnoe_sd_uiux_core: + """ with gr.Row(): + with gr.Column(): + with gr.Row(): + layouts_dropdown = gr.Dropdown(label="Layout", elem_id="layout_drop_down", interactive=True, choices=get_files(layouts_folder,[".json"]), type="value") + layout_save_as_filename = gr.Text(label="Save / Save as", elem_id="layout_save_as_name",) + with gr.Row(): + layout_reset_button = gr.Button(elem_id="layout_reset_btn", value="Reset", variant="primary") + layout_save_button = gr.Button(value="Save", elem_id="layout_save_btn", variant="primary") + with gr.Row(elem_id="layout_hidden"): + layout_json = gr.Textbox(label="Json", elem_id="layout_json", show_label=True, lines=7, interactive=False, visible=True) + + def save_layout( layout_json, filename): + with open(os.path.join(layouts_folder, f"{filename}.json"), 'w', encoding="utf-8") as file: + file.write(layout_json) + file.close() + layouts_dropdown.choices=get_files(layouts_folder,[".json"]) + return gr.update(choices=layouts_dropdown.choices, value=f"{filename}.json") + + def open_layout(filename): + with open(os.path.join(layouts_folder, f"{filename}"), 'r') as file: + layout_json=file.read() + no_ext=filename.rsplit('.', 1)[0] + return [layout_json, no_ext] + + + layout_save_button.click( + fn=save_layout, + inputs=[layout_json, layout_save_as_filename], + outputs=layouts_dropdown + ) + + layouts_dropdown.change( + fn=open_layout, + inputs=[layouts_dropdown], + outputs=[layout_json, layout_save_as_filename] + ) """ + + + + return (anapnoe_sd_uiux_core, 'UI-UX Core', 'anapnoe_sd_uiux_core'), + + + +script_callbacks.on_ui_tabs(on_ui_tabs) \ No newline at end of file diff --git a/extensions-builtin/anapnoe-sd-uiux/style.css b/extensions-builtin/anapnoe-sd-uiux/style.css new file mode 100644 index 00000000..8e30771d --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/style.css @@ -0,0 +1,3247 @@ +* { + box-sizing: border-box; + transition-property: color, opacity, background-color, border-color; + transition-duration: 0.2s; + transition-timing-function: ease-out; +} + +:root { + --ae-primary-color: #1485d8; + --ae-secondary-color: #d81485; + --ae-main-bg-color: rgb(32 32 32); + + --ae-input-height: 35px; + --ae-input-slider-height: 0.6; + --ae-input-icon-height: calc(var(--ae-input-height) - var(--ae-input-border-size) * 2); + --ae-input-padding: 5px; + --ae-input-font-size: 14px; + --ae-input-line-height: 14px; + --ae-label-color: rgba(255, 255, 255, 0.75); + --ae-secondary-label-color: rgba(255, 255, 255, 0.5); + --ae-input-border-size: 2px; + --ae-input-border-radius: 0px; + + --ae-input-text-color: rgba(255, 255, 255, 0.75); + --ae-input-placeholder-color: rgba(255, 255, 255, 0.35); + --ae-input-bg-color: rgba(0, 0, 0, 0.25); + --ae-input-border-color: rgba(0, 0, 0, 0.1); + + --ae-input-hover-text-color: rgba(255, 255, 255, 0.75); + + --ae-panel-bg-color: rgba(64, 64, 64, 0.5); + --ae-panel-border-color: rgba(64, 64, 64, 0.75); + --ae-panel-padding: 5px; + --ae-border-radius: 5px; + --ae-border-size: 2px; + --ae-gap-size-val: 5px; + + --ae-gap-size: max(var(--ae-gap-size-val), var(--ae-border-size)); + --ae-border-size-neg: calc(var(--ae-border-size) * -1); + --ae-border-size-x2: calc((var(--ae-border-size) * 2) + 0px); + + --ae-group-bg-color: rgba(0, 0, 0, 0.25); + --ae-group-padding: 2px; + --ae-group-radius: 7px; + --ae-group-border-size: 2px; + --ae-group-border-color: rgba(0, 0, 0, 0.25); + --ae-group-gap: 6px; + +} + +body { + margin: 0; + color: var(--ae-label-color); + font-size: var(--ae-input-font-size); + /* line-height: 16px; */ + background-color: var(--ae-main-bg-color); + font-family: "IBM Plex Mono", monospace; +} + +.portal, +* .panel { + background-color: var(--ae-panel-bg-color); + padding: var(--ae-panel-padding); + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + flex-direction: column; + display: flex; + flex: 1 1 0%; + justify-content: space-between; + height: auto; +} + +* .panel { + flex-direction: inherit; + justify-content: flex-start !important; +} + +* .no-panel .portal { + background-color: transparent;; +} + +.flexbox { + display: flex; + justify-content: flex-start; + align-items: stretch; + flex-wrap: wrap; + padding: 0; + margin: 0; + flex: 1 1 0%; + gap: 5px; + min-width: min(160px, 100%); + flex-grow: 1; +} + +.flexbox.row { + flex-direction: row; +} + +.flexbox.col { + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; +} + +.flexbox.group{ + background-color: var(--ae-group-bg-color); + padding: var(--ae-group-padding);; + border-radius: var(--ae-group-radius) ; + outline: var(--ae-group-border-size) solid var(--ae-group-border-color); + gap: var(--ae-group-gap); +} +.sub-group{ + background-color: transparent !important; + outline: none !important; + padding: 0 !important; +} +.inset{ + padding: 2px !important; + margin: -2px; +} + +.flexbox.group .flexbox:not(.no-border) { + gap: var(--ae-group-gap); +} + +.grow-all div:not(.shrink){ + flex-grow: 1 !important; +} + +.unset-min-width { + flex-grow: 0; + min-width: unset; +} + +.row { + gap: var(--ae-gap-size); + flex-direction: row; +} + +.col { + gap: var(--ae-gap-size); + flex-direction: column; +} + +.no-border { + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + background-color: var(--ae-panel-bg-color); + /* gap: 0; */ + min-width: unset; + padding: var(--ae-panel-padding); +} + +.shrink { + min-width: unset; + flex-wrap: nowrap; + white-space: nowrap; + flex-grow: 0; +} + +.no-wrap { + flex-wrap: nowrap; +} + +.fb-60 { + flex-basis: 66%; + min-width: min(220px, 100%); +} + +.fb-40 { + flex-basis: 32.5%; +} + +.min-width { + min-width: min(220px, 100%); +} + +*.gradio-button.tool { + padding: 0; + align-self: flex-end; +} + +.fb-50 { + flex-basis: 49%; +} + +.flexbox.no-border.shrink { + color: black; +} + +.no-border>* { + align-self: flex-end; + background-color: transparent; + outline: none; + flex-basis: 0%; + flex-grow: 1; + padding: 0; +} + +.invisible *.gradio-button.tool { + font-size: 0; + line-height: 0; + background-color: var(--ae-input-bg-color); +} + +.invisible *.gradio-button.tool:hover { + background-color: var(--ae-primary-color); +} + +.invisible *.gradio-button.tool:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} + +*.tab-nav button:hover, +*.tab-nav button.selected, +*.gradio-button:hover { + color: var(--ae-input-hover-text-color); +} + +.portal.no-border { + flex-basis: 0%; +} + +.portal.gap { + gap: var(--ae-gap-size); +} + +.portal.gap>* { + gap: var(--ae-gap-size); + display: flex; + flex-direction: column; +} + +.portal.gap>div>* { + gap: var(--ae-gap-size); + display: flex; + flex-direction: row; +} + +.portal.no-min-width { + min-width: unset; + width: 0%; + height: 100%; +} + +* select, +* input, +* textarea, +* button { + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + vertical-align: middle; + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); +} + +*.gradio-textbox label { + flex-direction: column; + display: flex; +} + +*.gradio-slider label { + flex-direction: column; + display: flex; +} + +* label>span { + border: var(--ae-input-border-size) solid transparent; + margin-bottom: 5px; + vertical-align: middle; + margin-top: 0; + color: var(--ae-label-color); + font-family: inherit; + line-height: 20px; + font-size: var(--ae-input-font-size); +} + +*.gradio-slider .head { + margin-bottom: 0; + display: grid; + grid-template-columns: auto 70px; +} + +*.gradio-slider input[type="range"] { + height: calc(var(--ae-input-height) * var(--ae-input-slider-height)); + width: 100%; + min-height: calc(var(--ae-input-height) * var(--ae-input-slider-height)); + margin-bottom: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5); + margin-top: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5); + padding: 0; +} + +*.gradio-dropdown label { + flex-direction: column; + display: flex; + justify-content: space-between; + height: 100%; +} + +* button { + min-width: var(--ae-input-height); + min-height: var(--ae-input-height); +} + +*.gradio-slider input[type="number"] { + line-height: 16px; + /* font-size: 14px; */ + min-height: 22px; + max-height: 22px; + margin-top: 0px; + width: auto; + font-family: inherit; + padding: 0 5px; +} + +*.no-border>*:not(:first-child) { + padding-left: 0; +} + +*.wrap-inner { + display: flex; + position: relative; + flex-wrap: wrap; + align-items: center; + gap: var(--ae-gap-size); +} + +*.gradio-dropdown div.wrap, +* input, +* textarea, +* button { + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + vertical-align: middle; + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); +} + +*.shrink { + min-width: unset; + flex-wrap: nowrap; + white-space: nowrap; + flex-grow: 0; +} + +*.hidden { + display: none; +} + +*.gradio-accordion .label-wrap { + min-height: var(--ae-input-height); + align-items: center; + display: flex; + justify-content: space-between; + cursor: pointer; + width: 100%; + margin: 0; + padding: var(--ae-panel-padding) calc(var(--ae-panel-padding) + 4px); + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-input-bg-color); + color: var(--ae-primary-color); + white-space: nowrap; +} + +*.gradio-accordion .label-wrap.open { + margin-bottom: calc(var(--ae-panel-padding) - var(--ae-border-size)); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + /* background-color: var(--ae-panel-bg-color); + outline-color: var(--ae-primary-color); */ +} + +.gradio-accordion:has(> .open) { + /* outline: var(--ae-border-size) solid var(--ae-primary-color) !important; */ + background-color: var(--ae-input-bg-color); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + position:relative; + outline-offset: 0px; +} +.gradio-accordion > div > .gap { + padding: var(--ae-panel-padding); +} + +*.flexbox.align-flex-end { + justify-content: flex-end; +} + +* input[type="checkbox"] { + min-height: var(--ae-input-line-height); +} + +* input[type="radio"] { + min-height: var(--ae-input-line-height); +} + +*.no-bg { + background-color: transparent; + outline: none; +} + +*.gradio-radio label { + display: flex; + align-items: center; + transition: none; + cursor: pointer; + box-shadow: none; + gap: 5px; + flex: 0 1 0%; + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + vertical-align: middle; + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); +} + +*.gradio-radio label span { + margin: 0; + white-space: nowrap; + border: 0; +} + +*.gradio-radio .wrap { + gap: 5px; + display: flex; + flex-wrap: wrap; +} + +*.gradio-radio>span { + border: var(--ae-input-border-size) solid transparent; + margin-bottom: 5px; + vertical-align: middle; + margin-top: 0; + color: var(--ae-label-color); + font-family: inherit; + line-height: var(--ae-input-font-size); + font-size: var(--ae-input-font-size); +} + +* textarea::placeholder { + color: var(--ae-input-placeholder-color); + opacity: 1; +} + +*.gradio-gallery .icon { + opacity: 0.5; + height: var(--ae-input-icon-height); + color: var(--ae-input-text-color); +} + +*.gradio-html p { + margin: 0; + font-size: 13px; + line-height: 16px; + color: var(--ae-label-color); +} + +*.gradio-image .image-container { + width: 100%; + height: 100%; +} + +/* *[class*="gradio"] .center { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + cursor: pointer; + width: 100%; + height: 100%; + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + min-height: 25vh; + position: relative; +} */ + +* [data-testid="image"] img { + max-height: 40vh; +} + +*.block { + border: 0 !important; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + height: auto; + flex: 1 1 0%; + min-width: min(160px, 100%); +} + +[data-testid="block-label"], +div.float { + position: absolute; + display: inline-flex; + align-items: center; + z-index: 20; + background: var(--ae-input-bg-color); + padding: 3px; + pointer-events: none; + font-weight: normal; + font-size: 10px; + line-height: 10px; + width: fit-content; + border-radius: var(--ae-border-radius); + border-bottom-left-radius: 0; + border-top-right-radius: 0; + border: var(--ae-input-border-size) solid var(--ae-input-border-color); +} + +[data-testid="block-label"] span, +div.float span { + opacity: 0.8; + margin-right: 3px; + width: 11px; + height: 11px; +} +[data-testid="block-label"]{ + position: relative; +} +.gradio-highlightedtext span { + padding: 0; +} + +.gradio-highlightedtext .textfield span { + padding: 2px; + border-radius: 5px; +} + +.gradio-highlightedtext span.textspan span { + color: #000; + border-radius: 5px; + min-width: 16px; + display: inline-block; + text-align: center; +} +.gradio-highlightedtext .textfield{ + display: flex; + gap: 5px; + padding: 5px; + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + margin-top: 5px; + flex-wrap: wrap; +} +[id$="edit_user_metadata"] { + gap: var(--ae-gap-size); + text-align: left; +} +[id$="edit_user_metadata"] .gradio-column.gap{ + flex-grow:1; + justify-content: flex-end; + width: auto; +} +[id$="edit_user_metadata"] .gradio-column.gap:first-child { + flex-grow: 100; +} +[id$="edit_user_metadata"] .extra-network-name{ + font-size: 16px; + flex-grow:0; +} +[id$="edit_user_metadata"] .extra-network-name + .form label, +[id$="edit_user_metadata"] .extra-network-name + .form textarea, +[id$="edit_user_metadata"] .extra-network-name + .form{ + flex-grow:10; +} +[id$="edit_user_metadata"] .extra-network-name ~ .form .gradio-dropdown, +[id$="edit_user_metadata"] .extra-network-name + .form .gradio-textbox { + padding:0; + background-color: transparent; + outline: 0; +} +[id$="edit_user_metadata"] .gradio-column.gap:has(img) { + line-height: 0; +} +[id$="edit_user_metadata"] .scroll-hide{ + overflow-y:auto !important; +} + +* input.svelte-116rqfv { + display: none; +} + +*.wrap.svelte-xwlu1w { + display: flex; + flex-direction: column; + justify-content: center; +} + +* button:hover { + cursor: pointer; + background-color: var(--ae-primary-color); +} +* select:focus, +* input:focus, +* button:focus, +* textarea:focus { + outline: none; + border-color: var(--ae-primary-color); +} + +*.gradio-dropdown input:focus { + outline: var(--ae-input-border-size) solid var(--ae-primary-color); +} + +*.tab-nav button { + border-radius: 0; +} + +*.tab-nav button:first-child { + border-top-left-radius: var(--ae-border-radius); +} + +*.tab-nav button:last-child { + border-top-right-radius: var(--ae-border-radius); +} + +*.tab-item { + background-color: var(--ae-panel-bg-color); + padding: var(--ae-panel-padding); +} + +*.gradio-tabitem { + background-color: var(--ae-input-bg-color); + padding: var(--ae-panel-padding); + border-radius: var(--ae-border-radius); + border-top-left-radius: 0; +} + +button:hover, +button.active, +*.tab-nav button:hover, +*.tab-nav button.selected { + background-color: var(--ae-primary-color); +} + +button.active span, +button:hover span{ + color: var(--ae-input-hover-text-color); +} + +button.active .mask-icon, +button:hover .mask-icon{ + background-color: var(--ae-input-hover-text-color); +} + + + +*.gap { + display: flex; + flex-direction: column; + gap: var(--ae-gap-size); +} + +*.form { + display: inherit; + flex-direction: inherit; + gap: var(--ae-gap-size); + flex: 1 1 0%; + flex-wrap: inherit; +} + +* textarea { + height: auto !important; + overflow-x: hidden; + overflow-y: auto !important; +} + +*.hidden, +*.hide { + display: none !important; +} + +.gradio-column:empty, +.hide-empty:has(.form.hidden), +.hide-empty:has(.gradio-html:first-child:empty) { + display: none; +} + +:not(.portal)>.gradio-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--ae-gap-size); +} + +:not(.portal)>.gradio-column { + display: flex; + flex-direction: column; + gap: var(--ae-gap-size); + flex-grow: 1; + width: 100%; +} + +:not(.portal)>.gradio-highlightedtext, +:not(.portal)>.gradio-row, +:not(.portal)>.block.gradio-slider, +:not(.portal)>.block.gradio-dropdown, +:not(.portal)>.block.gradio-radio, +:not(.portal)>.block.gradio-checkbox, +:not(.portal)>.block.gradio-textbox { + background-color: var(--ae-panel-bg-color); + padding: var(--ae-panel-padding); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + margin: 0; +} + +:not(.portal)>.gradio-row>.gradio-row>.gradio-column>.block, +:not(.portal)>.gradio-row>.form>.block, +:not(.portal)>.gradio-row .form { + padding: 0; + background-color: transparent; + outline: none; + justify-content: flex-end; +} + +:not(.portal)>.gradio-row .form>.gradio-row { + flex-grow: 1; +} +:not(.portal)>.gradio-audio .wrap, +:not(.portal)>.gradio-video .wrap, +:not(.portal)>.gradio-file .wrap, +:not(.portal)>.gradio-image .wrap { + flex-direction: column; + display: flex; + justify-content: center; + align-items: center; + min-height: 25vh; + width: 100%; + height: 100%; +} + +[data-testid="block-info"] { + display: flex; + flex-direction: column; + text-wrap: wrap; +} + +*.gradio-dropdown { + overflow: visible !important; + pointer-events: none; +} + +*.gradio-dropdown .secondary-wrap input { + border: none !important; + background: none; + min-height: unset; + line-height: calc(var(--ae-input-icon-height) - 10px); + flex-grow: 1; + min-height: calc(var(--ae-input-height) - ( var(--ae-input-border-size) * 2 )); +} + +*.gradio-dropdown .secondary-wrap { + display: flex; + align-items: center; + flex-grow: 1; + gap: var(--ae-gap-size-val); + padding-right: var(--ae-input-height); +} + +*.gradio-dropdown div.wrap { + background: var(--ae-input-bg-color); + padding: 0; + position: relative; + pointer-events: all; +} + +*.gradio-dropdown label>span { + margin-bottom: 5px; +} + +*.gradio-dropdown label>* { + margin-bottom: 0; +} + +* svg.dropdown-arrow { + height: 90%; + position: absolute; + right: 5px; + fill: var(--ae-input-text-color); +} + +* .gradio-dropdown input { + display: flex; + flex: 1 1 100%; + width: 0px; +} + +ul.options { + position: absolute; + z-index: 99999; + margin: 0px !important; + box-shadow: none; + border-radius: var(--ae-border-radius); + background: var(--ae-main-bg-color); + min-width: fit-content; + max-width: 50vh; + max-height: 25vh !important; + overflow: auto; + color: var(--ae-label-color); + list-style: none; + top: var(--ae-input-height) !important; + margin-top: calc(var(--ae-border-size) * -1) !important; + bottom: unset !important; + padding: 0; + width: 100% !important; + outline: var(--ae-border-size) solid var(--ae-input-border-color); + overflow-x: hidden; +} + +li.item { + display: flex; + cursor: pointer; + padding: var(--ae-panel-padding); + justify-content: space-between; + margin: 0; +} + +li.item.active { + background: var(--ae-primary-color); + color: var(--ae-input-hover-text-color); +} + +li.item span { + order: 2; +} + +*.token { + flex-direction: row; + display: flex; + gap: 5px; + line-height: calc(var(--ae-input-height) - (var(--ae-input-border-size) * 2)); + background: var(--ae-panel-bg-color); + outline: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + font-size: var(--ae-input-font-size); + padding: 0 5px; + color: var(--ae-input-text-color); + margin: 0px; + overflow: hidden; +} + +*.token>span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +*.token-remove { + display: flex; + flex-direction: column; + align-self: center; + background: var(--ae-input-bg-color); + border-radius: 50%; + padding: 1px; + border: var(--ae-input-border-size) solid var(--ae-input-bg-color); +} + +*.token-remove svg { + fill: var(--ae-input-text-color); +} + +*.gradio-gallery { + justify-content: center; + position: relative; + width: 100%; +} + +*.grid-container { + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + display: grid; + gap: var(--ae-gap-size); +} + +*.thumbnails.scroll-hide { + /* display: flex; */ + scroll-behavior: smooth; + overflow: hidden; + align-self: center; + gap: 5px; + height: 100%; + padding: 5px; + flex-grow: 0; + max-height: 60px; +} + +*.thumbnail-small img { + width: 100%; + height: 100%; + object-fit: contain; +} + +*.gradio-gallery .preview { + position: absolute; + z-index: 1; + top: 0; + background-color: var(--ae-main-bg-color); + height: 100%; + display: flex; + flex-direction: column; + width: 100%; + border: var(--ae-border-size) solid var(--ae-input-border-color); +} + +*.gradio-gallery .preview img { + width: 100%; + max-height: 100vh; + object-fit: contain; + background-color: var(--ae-input-bg-color); + border: var(--ae-border-size) solid var(--ae-input-border-color); +} + +*.gradio-gallery .preview>img { + border: 0; +} + +*.grid-wrap { + overflow-y: auto; + position: absolute !important; + z-index: 0; + top: 0; + background-color: var(--ae-main-bg-color); + height: 100%; + display: flex; + flex-direction: column; + width: 100%; +} + +*.thumbnail-lg img { + width: 100%; + height: 100%; + object-fit: contain; + margin-bottom: calc(var(--ae-border-size) * -1); +} + +*.thumbnail-item { + height: auto; + width: 100%; + object-fit: contain; +} + +* button.thumbnail-item.thumbnail-small { + min-width: fit-content; + padding: 0; +} + +* button.thumbnail-item:hover { + background: var(--ae-panel-bg-color); +} + +* button.thumbnail-item.selected { + border: var(--ae-border-size) solid var(--ae-primary-color); +} + +*.gradio-gallery .preview button[aria-label] { + width: var(--ae-input-height); + height: var(--ae-input-height); +} + +*.gradio-gallery .preview .svelte-19sk1im { + right: 0; +} + +*.gradio-gallery .empty { + min-height: 100%; + align-items: center; + display: flex; + justify-content: center; +} + +* .styler { + display: flex; + flex-direction: column; + gap: var(--ae-gap-size); +} + +* .icon-buttons { + position: absolute; + display: flex; + right: 0; + padding: var(--ae-panel-padding); + gap: var(--ae-gap-size); +} + +* .livePreview { + position: absolute; + z-index: 2; + width: 100% !important; + height: 100% !important; + object-fit: contain; + background-color: var(--ae-main-bg-color); +} + +* .livePreview img { + object-fit: contain; + width: 100%; + height: 100%; + position: absolute; +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-button { + display: none; +} + +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-track { + border-radius: var(--ae-border-radius); + border: var(--ae-input-border-size) solid transparent; + background-clip: content-box; + background-color: var(--ae-input-bg-color); +} + +::-webkit-scrollbar-thumb { + background-color: var(--ae-panel-border-color) +} + +.split { + color: #ddd; + min-height: 50px; + display: flex; + flex-direction: row; + height: 100%; + flex-grow: 1; +} + +.split[direction="vertical"] { + flex-direction: column; + height: 100%; +} + +.split-container { + position: relative; + overflow: auto; +} + +* .gutter.gutter-horizontal { + background: linear-gradient(90deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-panel-bg-color) 45%, + var(--ae-panel-bg-color) 55%, + rgba(0, 0, 0, 0) 60%); +} + +* .gutter.gutter-horizontal:hover { + background: linear-gradient(90deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-primary-color) 45%, + var(--ae-primary-color) 55%, + rgba(0, 0, 0, 0) 60%); + cursor: col-resize; +} + +* .gutter.gutter-vertical { + background: linear-gradient(0deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-panel-bg-color) 45%, + var(--ae-panel-bg-color) 55%, + rgba(0, 0, 0, 0) 60%); +} + +* .gutter.gutter-vertical:hover { + background: linear-gradient(0deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-primary-color) 45%, + var(--ae-primary-color) 55%, + rgba(0, 0, 0, 0) 60%); + cursor: row-resize; +} + +.gutter:has(+ .split-container .accordion-vertical:not(.expand)) { + display: none; +} + +.accordion-title { + font-family: "IBM Plex Mono", monospace; + /* text-shadow: 0px 2px 2px #000000; */ +} + +.accordion { + display: flex; + flex-direction: column; + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); +} + +.accordion-container { + display: none; + flex-direction: column; + min-height: 16px; + margin-top: var(--ae-border-size); + gap: var(--ae-gap-size); + padding: var(--ae-panel-padding); +} + +.accordion.expand .accordion-container { + display: flex; +} + +.accordion-bar { + display: flex; + align-items: center; + background-color: var(--ae-panel-bg-color); + justify-content: space-between; + cursor: pointer; + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-panel-padding) calc(var(--ae-panel-padding) + 4px); + color: var(--ae-input-text-color); + margin: 0px; + min-height: var(--ae-input-height); + gap: var(--ae-gap-size); +} + +.accordion-bar .portal { + padding: 0; +} + +.accordion-bar .flexbox { + gap: var(--ae-gap-size); + align-items: center; +} + +.accordion.expand .accordion-bar { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.accordion-icon { + transform: rotate(90deg); +} + +.accordion.expand .accordion-icon { + transform: rotate(0deg); +} + +.accordion-vertical.expand .accordion-icon { + transform: rotate(-90deg); +} + +.accordion-vertical { + margin: calc(var(--ae-panel-padding) * 1); + height: calc(100% - var(--ae-panel-padding) * 2); + position: relative; + flex-direction: row; +} + +.accordion-vertical .accordion-bar { + border-radius: var(--ae-border-radius) !important; + flex-direction: column-reverse; + min-height: 100%; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + flex-grow: 0; + padding: var(--ae-panel-padding); + padding-left: var(--ae-panel-padding); +} + +.accordion-vertical .accordion-container { + margin: 0; + overflow-x: hidden; + position: relative; + height: 100%; + flex-direction: row; + min-height: 100%; + overflow-y: auto; + flex-grow: 1; + margin-left: var(--ae-border-size); +} + +.accordion-vertical .accordion-title { + transform: rotate(-90deg) translateX(50%); + white-space: nowrap; + width: 0; +} + +/* .accordion-bar .xtabs-tab { + justify-content: flex-start; +} */ + +.split-container.v-expand { + flex-basis: 0% !important; + min-width: fit-content; +} + +.split-container.v-expand .accordion-vertical .accordion-bar { + border-radius: var(--ae-border-radius) !important; +} + +.portal.auto-scroll { + flex: 2 2 auto; + overflow-x: hidden; + overflow-y: auto; + min-height: 0px; +} + +.layout { + display: flex; + flex-direction: column; + position: absolute; + inset:0; + padding: var(--ae-panel-padding); + gap: var(--ae-gap-size); +} + +.layout-header { + flex-direction: column; + gap: var(--ae-gap-size); + display: flex; + padding: 0; +} + +.layout-footer { + flex-direction: column; + gap: var(--ae-gap-size); + display: flex; + padding: 0; +} + +.layout-content { + flex-direction: column; + gap: var(--ae-gap-size); + flex-grow: 1; + display: flex; + min-height: 16px; + overflow: auto; + padding: var(--ae-border-size); + margin: calc(var(--ae-border-size) * -1); +} + +.mask-icon { + display: inline-block; + background: var(--ae-input-text-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + height: calc(var(--ae-input-height) - var(--ae-input-border-size) * 2); + width: calc(var(--ae-input-height) - var(--ae-input-border-size) * 2); + cursor: pointer; + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + max-width: 24px; + max-height: 24px; + border: 0; +} + +/* .mask-icon:hover { + background-color: var(--ae-primary-color); +} */ + +*.invisible { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: transparent; + outline: none; +} + +*.invisible .tool { + background: transparent; +} + +*.invisible label { + display: none; +} + +*.invisible:has(.gradio-checkbox) { + pointer-events: none; +} + +.invisible *.gradio-button { + min-width: var(--ae-input-height); + min-height: var(--ae-input-height); + font-size: 0; + line-height: 0; +} + +/* button .mask-icon:hover { + background-color: var(--ae-input-hover-text-color); +} */ + +.icons-bar { + padding-top: 0; + padding-bottom: 0; + justify-content: center; +} + +.accordion-vertical .icons-bar { + padding-left: 0; + padding-right: 0; + padding-top: var(--ae-panel-padding); + padding-bottom: var(--ae-panel-padding); +} + +.icons-bar .flexbox>.mask-icon { + min-width: calc(var(--ae-input-height) + var(--ae-input-border-size) * 2); +} + +/* .icons-bar .mask-icon:hover { + background-color: var(--ae-input-hover-text-color); +} */ + +.xtabs { + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); +} + +.xtabs-item { + flex-direction: column; + min-height: 16px; + gap: var(--ae-gap-size); + padding: var(--ae-panel-padding); +} + +.xtabs-item.active { + display: flex; +} + +.xtabs-tab.active { + background-color: var(--ae-primary-color); +} + +.xtabs-tabs { + display: flex; + flex-wrap: wrap; +} + +.xtabs-tab { + display: flex; + gap: 5px; + align-items: center; + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); + min-width: var(--ae-input-height); + cursor: pointer; + justify-content: center; +} + +.xtabs-tab:hover { + background-color: var(--ae-primary-color); + color: var(--ae-input-text-color); +} + +/* .xtabs-tab:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} */ + +/* .active .mask-icon { + background-color: var(--ae-input-hover-text-color); +} */ + +.accordion-bar .xtabs-tab { + width: 100%; +} + +* [data-testid="image"] img { + object-fit: contain; + width: 100%; + height: 100%; +} + +* [data-testid="image"] .wrap { + display: flex; + flex-direction: column; +} + +.gr-group { + width: 100%; + position: relative; +} + +.border-padding { + padding: var(--ae-panel-padding); +} + +.full-height>textarea, +.full-height { + height: 100% !important; + resize: none; +} + +h1 { + line-height: 1em; + margin: 0; +} + +.no-padding-one, +.no-padding { + padding: 0; +} + +.no-padding>* { + padding: 0; +} + +*.extra-network-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--ae-gap-size); + /* content-visibility: auto; */ +} + +*.extra-network-cards .card { + display: block; +} + +*.extra-network-cards .card img { + object-fit: cover; + width: 100%; + height: auto; + aspect-ratio: 3/4; + border-radius: var(--ae-border-radius); + transform: scale(1.1); + pointer-events: none; +} + +*.extra-network-cards .card:hover .button-row { + display: flex; +} + +*.extra-network-cards .card:hover { + cursor: pointer; +} + +*.extra-network-cards .card .button-row { + position: absolute; + display: none; + z-index: 1; + top: 0px; + right: 0; + background-color: var(--ae-input-bg-color); + padding: 2px; +} + +*.extra-network-cards .card .card-button:hover { + background-color: var(--ae-primary-color); +} + +*.extra-network-cards .card .card-button { + background-color: var(--ae-label-color); + width: 24px; + height: 24px; +} + +*.extra-network-cards .card { + position: relative; + overflow: hidden; + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + border: var(--ae-border-size) solid var(--ae-input-bg-color); +} + +*.actions { + position: absolute; + bottom: 0; + padding: 10px; + background-color: var(--ae-main-bg-color); + font-size: 16px; + font-weight: 600; + left: 0; + right: 0; + display: flex; + flex-direction: column; + gap: 5px; + max-height: 100%; +} + +span.name { + overflow-wrap: anywhere; + /* text-shadow: 0 0px 3px #000; */ + text-transform: uppercase; + display: block; + color: var(--ae-label-color); + text-align: center; +} + +span.description { + font-size: 11px; + line-height: 14px; + display: block; + max-height: 80px; + overflow: hidden; + opacity: 0.6; +} + + + +*.metadata-button { + -webkit-mask-image: url(./html/svg/file-info-fill.svg); +} + +*.edit-button.card-button { + -webkit-mask-image: url(./html/svg/file-edit-fill.svg); +} + +div#flexbox-10 { + justify-content: center; +} + +div#flexbox-10>* { + flex-grow: 0; +} + +div#iobp { + position: relative; + height: 90vh; +} + +[id$="2img_neg_prompt"] textarea, +[id$="2img_prompt"] textarea { + position: absolute; + inset: 0; + resize: none; + font-size: 16px; + line-height: 24px; + width: 100%; + min-height: 100%; +} + +div#layout-3 { + position: relative; + height: 90vh; +} + + +.icon-folder { + -webkit-mask-image: url(./html/svg/folder-open-line.svg); +} + +.icon-save { + -webkit-mask-image: url(./html/svg/save-2-line.svg); +} + +.icon-zip { + -webkit-mask-image: url(./html/svg/file-zip-line.svg); +} + +.icon-2txt2img { + -webkit-mask-image: url(./html/svg/t-box-line.svg); +} + +.icon-2inpaint { + -webkit-mask-image: url(./html/svg/paint-brush-line.svg); +} +.gradio-button:has( [class*="icon-2"])::before, +.gradio-button:has( [class*="icon-2"])::after{ + content: ""; + width: 11px; + height: 11px; + position: absolute; +} + +.gradio-button:has( [class*="icon-2"])::after { + right: 0px; + top: 0px; + background-color: var(--ae-input-hover-text-color); + -webkit-mask-image: url(./html/svg/arrow-up-line.svg); + z-index: 2; +} +.gradio-button:has( [class*="icon-2"])::before { + right: -1px; + top: -1px; + background-color: var(--ae-primary-color); + padding: 1px; + border-radius: 50%; + z-index: 1; +} + +.icon-2extras { + transform: scaleX(-1); + -webkit-mask-image: url(./html/svg/picture-in-picture-exit-line.svg); +} + +.icon-2img2img { + -webkit-mask-image: url(./html/svg/image-line.svg); +} + +.refresh { + -webkit-mask-image: url(./html/svg/loop-right-line.svg); +} + +.icon-info { + -webkit-mask-image: url(./html/svg/information-line.svg); +} + +.icon-crop { + -webkit-mask-image: url(./html/svg/crop-line.svg); +} + +.icon-res-switch { + -webkit-mask-image: url(./html/svg/arrow-up-down-line.svg); +} + +.icon-scripts { + -webkit-mask-image: url(./html/svg/plug-line.svg); +} + +.icon-generate { + -webkit-mask-image: url(./html/svg/ai-generate.svg); +} + +.icon-skip { + -webkit-mask-image: url(./html/svg/skip-forward-line.svg); +} + +.icon-stop { + -webkit-mask-image: url(./html/svg/stop-circle-line.svg); +} + +.icon-loop { + -webkit-mask-image: url(./html/svg/infinity-fill.svg); +} + +.icon-node-tree { + -webkit-mask-image: url(./html/svg/node-tree.svg); +} + +.icon-magic { + -webkit-mask-image: url(./html/svg/magic-line.svg); +} + +.icon-delete { + -webkit-mask-image: url(./html/svg/delete-bin-2-line.svg); +} + +.icon-styles-edit { + -webkit-mask-image: url(./html/svg/draft-line.svg); +} + +.icon-styles-apply { + -webkit-mask-image: url(./html/svg/bill-line.svg); +} + +.icon-dice { + -webkit-mask-image: url(./html/svg/dice-1.svg); +} + +.icon-recycle { + -webkit-mask-image: url(./html/svg/recycle-line.svg); +} + +.icon-equalize { + -webkit-mask-image: url(./html/svg/equalizer-line.svg); +} + +.icon-bug { + -webkit-mask-image: url(./html/svg/bug-2-line.svg); +} + +.icon-prompt { + -webkit-mask-image: url(./html/svg/edit-box-line.svg); +} + +.icon-arrow-down { + -webkit-mask-image: url(./html/svg/arrow-down-s-line.svg); +} +.icon-arrow-up { + -webkit-mask-image: url(./html/svg/arrow-up-s-line.svg); +} + + +.icon-checkpoints { + -webkit-mask-image: url(./html/svg/sparkling-line.svg); +} + +.icon-textual-inversion { + -webkit-mask-image: url(./html/svg/focus-line.svg); +} + +.icon-hypernetworks { + -webkit-mask-image: url(./html/svg/focus-2-line.svg); +} + +.icon-lora { + -webkit-mask-image: url(./html/svg/focus-2-fill.svg); +} + +.icon-quicksettings { + -webkit-mask-image: url(./html/svg/list-settings-line.svg); +} + +.icon-pnginfo { + -webkit-mask-image: url(./html/svg/image-add-line.svg); +} + +.icon-extensions { + -webkit-mask-image: url(./html/svg/box-3-line.svg); +} + +.icon-theme { + -webkit-mask-image: url(./html/svg/contrast-drop-2-line.svg); +} + +.icon-settings { + -webkit-mask-image: url(./html/svg/settings-3-line.svg); +} + +.icon-app-logo { + -webkit-mask-image: url(./html/SDNext_Logo.svg); +} + +.icon-txt2img { + -webkit-mask-image: url(./html/svg/t-box-line.svg); +} + +.icon-img2img { + -webkit-mask-image: url(./html/svg/image-line.svg); +} + +.icon-extras { + transform: scaleX(-1); + -webkit-mask-image: url(./html/svg/picture-in-picture-exit-line.svg); +} + +.icon-model-merger { + transform: rotate(90deg); + -webkit-mask-image: url(./html/svg/organization-chart.svg); +} + +.icon-train { + -webkit-mask-image: url(./html/svg/robot-2-line.svg); +} + +.icon-image-edit { + -webkit-mask-image: url(./html/svg/image-edit-line.svg); +} +.icon-ruler { + -webkit-mask-image: url(./html/svg/ruler-2-line.svg); +} + +.question-answer { + -webkit-mask-image: url(./html/svg/question-answer-line.svg); +} + +.icon-install { + -webkit-mask-image: url(./html/svg/install-line.svg); +} + +.star_count:before +{ + content:""; + -webkit-mask-image: url(./html/svg/star-line.svg); + width: 16px; + height: 16px; + background-color: var(--ae-primary-color); + display: flex; + +} + +.icon-rocket { + -webkit-mask-image: url(./html/svg/rocket-fill.svg); +} +.icon-github { + -webkit-mask-image: url(./html/svg/github-fill.svg); +} +.icon-reload { + -webkit-mask-image: url(./html/svg/restart-fill.svg); +} +.icon-gradio { + -webkit-mask-image: url(./html/svg/gradio-fill.svg); +} + +.icon-sort { + -webkit-mask-image: url(./html/svg/sort-asc.svg); +} +button.active .icon-sort { + -webkit-mask-image: url(./html/svg/sort-desc.svg); +} + +.icon-cancel { + -webkit-mask-image: url(./html/svg/close-line.svg); +} +.icon-terminal { + -webkit-mask-image: url(./html/svg/terminal-box-line.svg); +} + +.icon-dock { + -webkit-mask-image: url(./html/svg/layout-2-line.svg); +} + +.icon-trophy { + -webkit-mask-image: url(./html/svg/trophy-line.svg); +} + +.icon-vip { + -webkit-mask-image: url(./html/svg/vip-diamond-line.svg); +} + +.icon-contributors{ + -webkit-mask-image: url(./html/svg/team-line.svg); +} + +#contributors_grid { + gap: 5px; + align-items: flex-start; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + white-space: nowrap; + overflow: auto; + margin: var(--ae-panel-padding); + padding-right: var(--ae-panel-padding); +} +#contributors_grid a { + align-items: center; + padding: 10px; +} +#contributors_grid figure { + margin: 0; +} +#contributors_grid img { + width: 60px; + border-radius: 50%; +} + +#flexbox-9 { + justify-content: flex-end; +} + +#flexbox-8 { + min-width: 0px; + justify-content: flex-end; +} + +#split-2 { + height: 100%; +} + +#portal-49 { + min-height: 100%; +} + +#portal-50 { + min-height: 100%; +} + + + + + + + + +.icons-bar>* { + flex-grow: 0; +} + +.accordion-bar .xtabs-tab span { + display: none; +} + + + +.xtabs-tab svg { + fill: var(--ae-input-text-color); + position: relative; + top: -2px; +} + +/* #main-nav .xtabs-tab { + background-color: transparent; +} + +#main-nav .xtabs-tab.hover, +#main-nav .xtabs-tab.active { + background-color: var(--ae-input-bg-color); +} +*/ + +div#main-nav { + padding: 0px; + margin: calc(var(--ae-panel-padding) * 2); + margin-right: calc(var(--ae-panel-padding) * -1); + margin-left: calc(var(--ae-panel-padding) * 2); + padding: var(--ae-panel-padding); +} +.no-br{ + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.no-tr{ + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.no-rr{ + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +.no-lr{ + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + + + +.extra-network-subdirs>button, +.settings-tabs button { + text-align: left; + font-size: 98%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.extra-network-subdirs, +.settings-tabs .tab-nav { + gap: 1px; + display: flex; + flex-direction: column; +} + +.split-container[data-initsize="25"] { + min-width: 135px !important; +} + +.gradio-row:empty, +.hide-empty:has(.form.hidden), +.hide-empty:has(.gradio-html:first-child:empty) { + display: none; +} + +* .settings-comment { + margin: 5px 0; + font-size: 10px; + color: rgba(255, 255, 255, 0.4); +} + +* .settings-comment:has(a) { + font-size: 0; +} + +* .settings-comment a { + font-size: 10px; +} + +* a:not(:has(button)) { + color: var(--ae-input-text-color); + background-color: var(--ae-input-bg-color); + border-radius: 3px; + padding: 2px 10px; + text-decoration: none; +} + +* a:not(:has(button)):hover { + color: var(--ae-input-hover-text-color); + background-color: var(--ae-primary-color); +} + +.spacer-v { + max-height: var(--ae-input-border-size); + min-height: var(--ae-input-border-size); + background-color: var(--ae-input-border-color); +} + +* button[aria-label] { + width: var(--ae-input-height); + height: var(--ae-input-height); +} +* button[aria-label="Edit"] { +display:none; +} + + +* .center.boundedheight { + background-color: var(--ae-input-bg-color); +} + +.ae-button { + display: flex; + align-items: center; + justify-content: center; + gap: var(--ae-gap-size); + border-radius: var(--ae-border-radius); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + background-color: var(--ae-input-bg-color); + /* padding: var(--ae-panel-padding); */ + cursor: pointer; +} + + +/* .ae-button .mask-icon:hover, +.ae-button.active .mask-icon:hover { + background-color: var(--ae-input-hover-text-color); +} */ + +.ae-button.active { + color: var(--ae-input-hover-text-color); + background-color: var(--ae-primary-color); +} + +.ae-button:hover, +.ae-button.active:hover { + color: var(--ae-input-hover-text-color); + background-color: var(--ae-primary-color); +} + +button:hover .icon-letters, +button.active .icon-letters { + color: var(--ae-input-hover-text-color); +} + +button.active svg, +button:hover svg { + fill: var(--ae-input-hover-text-color); +} + +/* .ae-button:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} + +.ae-button:hover span{ + color: var(--ae-input-hover-text-color); +} */ + +.portal:has(.gradio-accordion) { + padding: 0; +} + +.icons-bar .portal { + border: 0; + outline: 0; + background: transparent; +} + +.icons-bar .portal button { + padding: 0; + border: 0; + outline: 0; + background: transparent; +} + +.ae-button .gradio-button { + border: 0; + padding: 0; + min-width: unset; + min-height: unset; + align-items: center; + display: flex; +} + +.ae-button .gradio-button span { + padding: 5px; + font-size: var(--ae-input-font-size); +} + +.padding { + padding: var(--ae-panel-padding); +} + +.ae-button .portal { + padding: 0; + outline: 0; + background: transparent; +} + +.ae-button .portal button { + background-color: transparent !important; +} + +.center { + justify-content: center !important; +} + +#portal-16>div>div:first-child { + display: none; +} + +.toggle-seed { + padding: var(--ae-panel-padding) !important; + min-width: var(--ae-input-height); + height: var(--ae-input-height); +} +.gradio-group:has(> .styler:empty), +.portal:has(> .hide), +.gradio-column:has(> .form:empty), +.gradio-row:has(> .form:empty) { + display: none; +} + +.ae-button .gradio-button span { + padding: 5px; + font-size: var(--ae-input-font-size); +} + + + + +*.disable { + opacity: 0.5; + pointer-events: none; +} +*.disable > button { + display: flex !important; +} + +.generate { + overflow: hidden; +} + +.generate.active>.portal::before { + content: ""; + position: absolute; + height: 200px; + width: 200px; + background-image: linear-gradient(90deg, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.1) 50%, + rgba(255, 255, 255, 0) 51%, + rgba(255, 255, 255, 0) 100%); + background-repeat: repeat; + background-size: 20px; + transform: rotate(30deg); + z-index: 1; + -webkit-animation-name: bg-slide; + -webkit-animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; +} + +.generate.active>.portal>button { + position: relative; + -webkit-filter: drop-shadow(0px 0px 1px var(--ae-primary-color)) drop-shadow(0px 0px 1px var(--ae-primary-color)) drop-shadow(0px 0px 1px var(--ae-primary-color)) drop-shadow(0px 0px 1px var(--ae-primary-color)); + z-index: 1; +} +/* .generate.active > span{ + display:none !important; +} */ + +* #extensions_installed_top { + display: flex !important; +} + +*.notransition { + transition: none !important; + animation: none !important; + /* animation-duration: 0.0s !important; */ + /* animation-fill-mode: none !important; */ +} + + + +*.fade-in, +*.fade-out { + position: absolute; + inset: 0; + justify-content: flex-start !important; + overflow: auto; + z-index: 999; +} + +*.fade-in { + display: flex !important; + animation: fade-in 0.25s; + animation-fill-mode: forwards; +} + +*.notransition.fade-in { + display: flex !important; + position: initial !important; +} +*.notransition.fade-out { + display: none !important; + position: initial !important; +} + +*.fade-in > div:not(.layout-content) { + flex-grow:0; +} + +*.fade-out { + animation: fade-out 0.25s; + animation-fill-mode: forwards; +} + +*.template { + position: absolute; + inset: 0; +} + +.initial { + position: initial; +} + +.app { + min-height: 100vh; + width: 100%; + gap:0; +} +.app_footer { + flex-grow: 0; + margin: 0; + align-items: center; + gap: 0; +} +.app_footer br { + display:none; +} + +.grow { + flex-grow: 1; +} +.flex-start { + justify-content: flex-start; +} + +/* #main-nav .xtabs-tab { + justify-content: flex-start; +} */ + +#main-nav .xtabs-tab span { + display: none; +} + +#split-left>.xtabs-item { + padding: 0; +} + +.auto { + overflow: auto; +} + +.center.flexbox { + justify-content: center; +} +.center > .portal > button { + align-self: center; +} +.ae-button.tool { + width: var(--ae-input-height); + height: var(--ae-input-height); + min-width: var(--ae-input-height); + min-height: var(--ae-input-height); +} + +.xtabs-tab, +.portal>button { + align-items: center; + justify-content: center; +} + +#sp-ac1>.xtabs-item { + padding: 0; +} + +#template-right-sidebar, +#split-right { + min-width: calc(var(--ae-input-height) + var(--ae-border-size) + ((var(--ae-panel-padding) + var(--ae-input-padding)) * 2) + 1px); + +} + +.flex-start { + justify-content: flex-start !important; +} + +.flex-end { + justify-content: flex-end; +} + +#txt2img_header span { + display: none; +} + +.scroll-hide{ + overflow-y: hidden !important; + resize: none; +} + +.no-labels span{ +display:none; +} + + +[id$='2img_script_container'] > div > .form ~ div { + padding: var(--ae-panel-padding); + outline: var(--ae-input-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); +} +.portal .gradio-accordion div:has( [id^='setting_']) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1 1 0%; + min-width: min(160px, 100%); +} +.portal .gradio-accordion .gradio-row:has( [id^='setting_']) { + padding:0; + background-color:transparent; + outline:none; +} + +#imageARPreview { + position: absolute; + top: 0; + left: 0; + outline: 2px solid var(--ae-primary-color); + background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, var(--ae-primary-color) 200%); + z-index: 9000; + pointer-events: none; + display: block; + } + + + .tab-nav button { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +#resize_mode > span, +.accordion:has( #inpaint_controls.hide){ +display:none; +} + +.accordion:has( #resize_mode) .accordion-bar, +.accordion:has( #inpaint_controls) .accordion-bar{ + background-color:var(--ae-input-bg-color); +} +.icon-left button{ + display: flex; + flex-direction: row-reverse; + gap: 5px; +} + +.thumbnails.scroll-hide{ + display: none; +} +.thumbnails.scroll-hide:has(.thumbnail-item:nth-child(2)) { + display: flex ; +} +.gradio-gallery .preview > img { + height:100% !important; +} +.gradio-gallery:has( .thumbnail-item:nth-child(2)) .preview > img { + height: calc(100% - 60px)!important; +} + +.tabulator { + border: 1px solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); +} +.tabulator .tabulator-header { + border-bottom: 1px solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); + color: var(--ae-label-color); +} +.tabulator .tabulator-tableholder .tabulator-table { + background-color: var(--ae-panel-bg-color); + color: var(--ae-label-color); +} +.tabulator-row { + background-color: var(--ae-panel-bg-color); +} +.tabulator-row.tabulator-row-even { + background-color: var(--ae-panel-bg-color); +} +.tabulator-row.tabulator-selectable:hover{ + background-color: var(--ae-input-bg-color); +} +.tabulator-row .tabulator-cell { + border-right: 1px solid var(--ae-panel-border-color); +} + +.rgRow { + transition: none!important; +} + +button.gridjs-sort-neutral { + width: 13px !important; + height: 13px !important; + min-width: unset; + min-height: unset; +} +.gridjs-td a{ + display:block; + +} +.gridjs-tbody, td.gridjs-td { + background-color: var(--ae-panel-bg-color); +} +td.gridjs-td { + border: var(--ae-border-size) solid var(--ae-panel-border-color); + padding: var(--ae-panel-padding); + +} +.gridjs-container { + color: var(--ae-label-color); + font-size: 14px; + font-family:inherit; +} +th.gridjs-th { + background-color: var(--ae-input-bg-color);; + border: var(--ae-border-size) solid var(--ae-input-border-color); + color: var(--ae-label-color); + padding: var(--ae-panel-padding); + +} +th.gridjs-th-sort:focus, th.gridjs-th-sort:hover { + background-color: var(--ae-panel-bg-color); +} +td.gridjs-td[data-column-id="description"] { + flex-grow: 1; +} + +.gridjs-tr { + border: none; + display: flex; + flex-direction: column; + gap: 1px; +} +.gridjs-tbody, td.gridjs-td { + background-color: var(--ae-panel-bg-color); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: var(--ae-gap-size); + overflow-wrap: anywhere; +} + + +.additional, +.additional ul{ + display:none !important; +} +.additional, +.additional ul{ + margin: auto; + padding: 0; + gap: 5px; + margin-bottom: 2px; +} +.card:hover .additional, +.card:hover .additional ul{ + display:flex; +} +.additional ul a { + width: 24px; + height: 24px; + font-size: 125% !important; + align-items: center; + display: flex; + justify-content: center; + margin:0 !important; +} +.params{ + min-width:370px; + +} + +#template-settings .split-container:first-child, +.layout-extra-networks .split-container:first-child { + min-width: 135px; +} +#split-right:not(.v-expand){ + min-width:512px; +} +.layout-extra-networks:has( .show-dirs) .gutter, +.layout-extra-networks:has( .show-dirs) .split-container:first-child { + display :none; +} +.layout-extra-networks:has( .show-dirs:not(.active)) .split-container { + flex-basis: 100% !important; +} +.layout-extra-networks:has( .show-dirs.active) .gutter, +.layout-extra-networks:has( .show-dirs.active) .split-container:first-child { + display :flex; +} +.layout-extra-networks{ + gap:2px; + +} +.layout-extra-networks > div:first-child{ + padding-bottom:0 !important; + +} + +/* tab extensions */ +.tabs_extensions table { + width:100%; +} +.tabs_extensions thead{ + display:none; +} + +.tabs_extensions tbody{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--ae-gap-size); + content-visibility: auto; +} +.tabs_extensions tr{ + flex-direction: column; + display:flex; + padding:var(--ae-panel-padding); + background-color: var(--ae-panel-bg-color); + gap: 5px; + border: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + position:relative; +} +.tabs_extensions td { + display: flex; + text-wrap: wrap; + flex-direction: row; + overflow-wrap: anywhere; + flex-wrap: wrap; + gap:5px; +} +.tabs_extensions td:has(p.info) { + flex-direction: column; + flex-grow: 1; + justify-content: space-between; + gap: 10px; +} +.tabs_extensions td p.info:has(span) { + flex-direction: row; + display: flex; + flex-wrap: wrap; + gap: 7px; + flex-grow: 0; + justify-content: space-between; + align-items: flex-end; +} +.tabs_extensions span.date_added { + max-width: 130px; + text-align: justify; + text-align-last: justify; + color: var(--ae-secondary-label-color); + background-color: var(--ae-input-bg-color); + padding: var(--ae-panel-padding); + border-radius: var(--ae-border-radius); + font-size: 11px; +} +span.star_count { + background-color: var(--ae-input-bg-color); + padding: 5px 10px 5px 5px; + display: flex; + flex-direction: row; + justify-content: center; + border-radius: 5px; + font-size: 0; + line-height: 0; + justify-items: end; + gap: 2px; + align-items: center; +} +span.star_count b { + font-size: 12px; +} + +.tabs_extensions td br { + flex-basis: 100%; + content: ""; +} +.tabs_extensions td a { + font-size: 14px; + padding: 5px; + display:block; +} +.tabs_extensions td button { + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; +} +.tabs_extensions td label:has(input) { + display: flex; + gap: 5px; + font-size: 14px; + border-radius: 5px; + line-height: 23px; + align-items: flex-start; +} + +/* .tabs_extensions .wrap { + display: flex; + flex-direction: column; + position: relative; + z-index: 1; + background-color: black; + padding: 10px; + gap: 5px; +} +*/ +.tabs_extensions tr:has(a[href=""]) { + background-color: var(--ae-input-bg-color); + border-color: var(--ae-input-border-color); +} +.tabs_extensions td:empty, +.tabs_extensions td:has( a:empty){ + display: none !important; +} + +.tabs_extensions td:nth-child(1) a, +.tabs_extensions td:nth-child(2) a { + background-color: transparent; + color: var(--ae-primary-color); + padding: 0; + font-size: 12px; +} +.tabs_extensions td:nth-child(1) a:hover, +.tabs_extensions td:nth-child(2) a:hover { + color: var(--ae-label-color); +} +.tabs_extensions td:nth-child(1) a { + font-size: 14px; +} + +.gradio-image { + height: 100%; + width: 100%; + object-fit: contain; +} +#pnginfo_image [data-testid="image"] img { + max-height: unset; + min-height: 100%; +} +.full-height>textarea { + overflow-y: auto!important; +} + + +.ae-popup{ + /* position: fixed; + width: 100vw; + height: 100vh; + z-index: 9999; + */ + align-items: center; + background-color: var(--ae-input-bg-color); + justify-content: center !important; +} + +.ae-popup-inner{ + /* width:50vw; + height:50vh; */ + width:100%; + height:100%; + background-color: var(--ae-main-bg-color); + position:relative; +} + + .ae-popup .standalone-card-preview img{ + height: 100%; + width: 100%; + object-fit: contain; + max-height: 45vh; + } + .ae-popup .edit-user-metadata-buttons button:first-child{ + display:none; + } + .global-popup-inner{ + flex-grow: 0; + position: relative; + } + .relative-height{ + flex-grow:0; + position:relative + } + + #popup_close{ + position: absolute; + right: calc(var(--ae-panel-padding) * 2); + bottom: calc(var(--ae-panel-padding) * 3); + height: 24px; + padding-right: calc(var(--ae-panel-padding) * 3); + } + + +.wrap .svelte-zyxd38 svg { + display:none !important; +} +.wrap .progress-text{ + background-color:var(--ae-main-bg-color); + color:var(--ae-label-color); + font-size:10px; + display:flex; + flex-grow:0; +} +#popup_trigger{ + display:none; +} + + +@-webkit-keyframes bg-slide { + from { + background-position: 0%; + } + + to { + background-position: -100%; + } +} + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + /* transform: scale(0.5); */ + } + + 100% { + opacity: 1; + /* transform: scale(1.0); */ + } +} + +.icon-letters{ + justify-content: center; + text-transform: uppercase; + font-size: 14px; + font-weight: 600; + width: 24px; + line-height: 24px; +} + + +.center.boundedheight.flex { + width: 100% !important; + height: auto !important; + /* max-height: 50vh;*/ + } + + + + .image-container img.absolute-img { + /* position: relative !important; */ + position: absolute !important; + } + + .image-container img { + max-height: 50vh !important; + } + + .image-container { + min-height: 25vh !important; + /* height: auto !important; */ + display: flex; + position:relative; + } + .image-container:has(canvas) { + min-height: 50vh !important; + } + + .absolute-img { + 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; + } + + + + #tab_img2img div.center.boundedheight.flex { + display: block !important; + } + +* .center.boundedheight > div:has(.brush), +* .center.boundedheight > div:has([aria-label="Clear"]) { + position: absolute; + padding: var(--ae-panel-padding); + top: 0; + right: 0; + z-index: 999; +} + +* .center.boundedheight > div:has(.brush) { + top: 70px; + min-height: unset; + width: auto; + height: auto; + gap: var(--ae-gap-size); +} + + + +[id*="label_copy_to"]{ + /* flex-basis: 100%; */ + font-size: 12px; + flex-grow: 0; + min-width: 65px; + justify-content: center; + line-height: 12px; +} +[id*="_copy_to_"].gradio-row{ + justify-items: center; + background-color: transparent; + padding: 0; + outline: 0; +} +[id*="_copy_to_"].gradio-row button{ +flex-grow:1; +} +.group-row{ + gap: 1px !important; +} +.group-row > * button, +.group-row > *{ + border-radius: 0 !important; +} +.group-row > *:last-child button, +.group-row > *:last-child{ + border-top-right-radius: var(--ae-border-radius) !important; + border-bottom-right-radius: var(--ae-border-radius) !important; +} +.group-row > *:first-child button, +.group-row > *:first-child{ + border-top-left-radius: var(--ae-border-radius) !important; + border-bottom-left-radius: var(--ae-border-radius) !important; +} + +.progress-flex { + position: absolute; + padding: calc(var(--ae-panel-padding) * 1 ); + bottom: 0; + left: 0; + right: 0; + display:none; +} +.progress-flex > div { + position: relative; + z-index: 123; + white-space: nowrap; + padding: 0; + border-radius: 0; +} +.progress-flex:has( .progress) { + display: flex; +} + +.progress{ + background-color:var(--ae-primary-color); + padding:2px; + border-radius: 0; +} + +iframe{ + border:0; +} +.other> div{ + background: transparent; + outline: 0; +} +.other .gradio-column:first-child{ + flex-grow: 1; + padding: 0; + gap: 0; +} +.other iframe:first-child{ + max-height: calc(100vh - var(--ae-panel-padding) * 6); +} + +.ae-button > a:hover, +.ae-button > a{ + padding: 0; + background-color: transparent; + line-height: 0; +} + +div#workspaces_tabitem > div { + padding: 0; +} + +/*infinite-image-browsing*/ +#tab_infinite-image-browsing_tabitem{ + overflow:hidden; + padding: 0; +} + +/*a1111-sd-webui-tagcomplete*/ +ul{ + padding:0; + margin:0; +} +.autocompleteResults { + background-color: var(--ae-main-bg-color)!important; + border: var(--ae-border-size) solid var(--ae-input-border-color)!important; + border-radius: var(--ae-border-radius)!important; +} +.autocompleteResultsList > li:nth-child(odd) { + background-color: var(--ae-panel-bg-color)!important; +} +.autocompleteResultsList > li.selected { + background-color: var(--ae-primary-color)!important; +} + +.log-row { + display: table; + overflow-wrap: anywhere; +} +.log-row a { + padding: 0 5px; +} +.log-date { + color: #cacaca; + display: table-cell; + white-space: nowrap; + padding: 0px 10px; + font-size: 9px; +} +.log-boolean, +.log-undefined {color: magenta;} +.log-object {color: #cfb0ff;} +.log-string {color: #ffca68;} +.log-number {color: cyan;} +.log-info {color: yellow;} + +.log-string.log-remove {color: #ff4f4f;} +.log-string.log-load {color: #74ff80;} +.log-string.log-url {color: #8fc9ff;} +.log-string.log-object {color: #8fc9ff;} + + +.card.selected { + border: var(--ae-border-size) solid var(--ae-primary-color); +} +.card.selected .actions{ + background-color: var(--ae-primary-color); +} +.column-1{ + column-count: 1; + gap:32px; +} +.column-2{ + columns: 320px 2; + gap:32px; +} +.column-3{ + column-count: 3; + gap:32px; +} +.lcol{ + gap:32px; + align-items: flex-start; + display: grid; + /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */ +} + +.lcol > .col{ +min-width: min(480px, 100%); +} +#about_tabitem { + font-size: 14px; + line-height: 20px; + font-family: monospace; + /* text-align: justify; */ +} +#about_tabitem img{ + display:flex; + width: 100%; + height: auto; +} +#about_tabitem a{ + background-color: transparent; + color:var(--ae-primary-color); + padding: 0; +} +#about_tabitem a:hover{ + color: var(--ae-label-color); +} +#about_tabitem p, h1, h2{ + margin:0; + margin-bottom: calc(var(--ae-panel-padding) * 1 ); +} +#about_tabitem p, #about_tabitem ul, #about_tabitem img { + margin-bottom: 24px; +} +#about_tabitem h1, h2{ + /* margin-top: calc(var(--ae-panel-padding) * 3 ); */ + font-size:20px; + color: var(--ae-primary-color); +} +#about_tabitem ul{ + padding-inline-start: calc(var(--ae-panel-padding) * 4 ); +} +#about_tabitem li::marker{ + color: var(--ae-primary-color); +} +.lrp-32{ + gap:32px; + padding-top: 20px; + padding-left: 32px; + padding-right: 32px; + max-width: 960px; +} +.gradio-audio > .wrap, +.gradio-video > .wrap, +.gradio-file > .wrap, +.gradio-image > .wrap, +.wrap.center.full.translucent{ + min-height: unset; + position: absolute; + z-index: 100; + height: auto; + width: auto; +} + +div#quicksettings { + flex-direction: row; + display: inline-flex; + gap: var(--ae-gap-size); + flex-wrap: wrap; +} +div#quicksettings > div { + flex: 1 0 calc(100% - var(--ae-input-height) * 2); +} +div#quicksettings div + button { + flex: 0 1 0%; + margin-bottom: var(--ae-panel-padding); +} + +.relative{ + position:relative; +} +.accordion-vertical.expand { + flex-grow: 1 !important; +} + +.no-grow{ + flex-grow: 0; +} +#sidebar_secondary_tabs{ + justify-content: flex-end; +} + +#pnginfo_image .center.boundedheight.flex{ + display: flex; + align-items: center; + text-align: center; +} + +.gradio-colorpicker label { + flex-direction: row; + align-items: center; + pointer-events: none; +} +.gradio-colorpicker input { + pointer-events: all; +} + +input[type="radio"], +input[type="checkbox"] { + accent-color: var(--ae-primary-color); + cursor: pointer; +} +.selected span.name { + color: var(--ae-input-hover-text-color); +} +#txt2img_edit_style_close, +#lightboxModal, +.gradio-container.app{ + display:none !important; +} + +.icon-physton { + -webkit-mask-image: url(./html/svg/pantone-line.svg); +} +.physton-prompt { + margin: 0 !important; +} +.physton-prompt .prompt-header .prompt-header-extend.prompt-append { + min-width:240px; + min-height: 26px; +} + +.physton-prompt .prompt-header .prompt-header-extend .extend-content .gradio-checkbox{ + display:none; +} + +.physton-prompt .show-group-tags{ + top: -15px; + right: 5px; +} +.physton-prompt .prompt-header .prompt-header-extend.prompt-append .extend-content { + margin-right: 20px; +} +#train_tabitem .tabs{ + width:100%; +} + +@-webkit-keyframes fade-out { + 0% { + opacity: 1; + /* transform: scale(1.0); */ + } + + 100% { + opacity: 0; + /* transform: scale(0.5); */ + } +} + +@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: var(--ae-input-border-size) solid var(--ae-input-border-color); + position: relative; + border-radius: var(--ae-border-radius); + } + + input[type="range"]::after { + content: ""; + position: absolute; + height: 100%; + background-image: var(--ae-slider-bg-overlay); + width: 100%; + left: 1px; + } + + 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); + } +} + +@media (max-width: 768px) { + .xtabs-tab span { + display: none; + } +} + +/* Firefox */ +* { + scrollbar-color: var(--ae-panel-border-color) var(--ae-main-bg-color) !important; + scrollbar-width: thin !important; +} + +input[type="range"]::-moz-range-progress { + background-color: var(--ae-primary-color); + height: 100%; + background-image: var(--ae-slider-bg-overlay); +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 100%; + background-color: var(--ae-input-bg-color); + border: none; + border-radius: 0px; + position: relative; + background-image: var(--ae-slider-bg-overlay); + opacity: 1; +} + +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); +} \ No newline at end of file diff --git a/screenshot.png b/screenshot.png index 537566c2..5fc248b6 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/style.css b/style.css index a294d361..fb4e2f1f 100644 --- a/style.css +++ b/style.css @@ -1,14 +1,1104 @@ -: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*/ +/* temporary fix to load default gradio font in frontend instead of backend */ -/* -Theme Name: DarkUX -Author: anapnoe -Author URI: https://github.com/anapnoe/stable-diffusion-webui -Version: 1.0 -License: GNU General Public License -*/ +@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap'); -body{ - background-color:transparent; + +/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */ + +div.gradio-image button[aria-label="Edit"] { + display: none; +} + + +/* general gradio fixes */ + +:root, .dark{ + --checkbox-label-gap: 0.25em 0.1em; + --section-header-text-size: 12pt; + --block-background-fill: transparent; + +} + +.block.padded:not(.gradio-accordion) { + padding: 0 !important; +} + +div.gradio-container{ + max-width: unset !important; +} + +.hidden{ + display: none; +} + +.compact{ + background: transparent !important; + padding: 0 !important; +} + +div.form{ + border-width: 0; + box-shadow: none; + background: transparent; + overflow: visible; + gap: 0.5em; +} + +.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 !important; + box-shadow: none !important; +} + +div.gradio-group, div.styler{ + border-width: 0 !important; + background: none; +} +.gap.compact{ + padding: 0; + gap: 0.2em 0; +} + +div.compact{ + gap: 1em; +} + +.gradio-dropdown label span:not(.has-info), +.gradio-textbox label span:not(.has-info), +.gradio-number label span:not(.has-info) +{ + margin-bottom: 0; +} + +.gradio-dropdown ul.options{ + z-index: 3000; + min-width: fit-content; + max-width: inherit; + white-space: nowrap; +} + +.gradio-dropdown ul.options li.item { + padding: 0.05em 0; +} + +.gradio-dropdown ul.options li.item.selected { + background-color: var(--neutral-100); +} + +.dark .gradio-dropdown ul.options li.item.selected { + background-color: var(--neutral-900); +} + +.gradio-dropdown div.wrap.wrap.wrap.wrap{ + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.gradio-dropdown:not(.multiselect) .wrap-inner.wrap-inner.wrap-inner{ + flex-wrap: unset; +} + +.gradio-dropdown .single-select{ + white-space: nowrap; + overflow: hidden; +} + +.gradio-dropdown .token-remove.remove-all.remove-all{ + display: none; +} + +.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{ + display: flex; +} + +.gradio-slider input[type="number"]{ + width: 6em; +} + +.block.gradio-checkbox { + margin: 0.75em 1.5em 0 0; +} + +.gradio-html div.wrap{ + height: 100%; +} +div.gradio-html.min{ + min-height: 0; +} + +.block.gradio-gallery{ + background: var(--input-background-fill); +} + +.gradio-container .prose a, .gradio-container .prose a:visited{ + color: unset; + text-decoration: none; +} + +a{ + font-weight: bold; + cursor: pointer; +} + +/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */ +div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{ + overflow: visible !important; +} + +/* align-items isn't enough and elements may overflow in Safari. */ +.unequal-height { + align-content: flex-start; +} + + +/* general styled components */ + +.gradio-button.tool{ + max-width: 2.2em; + min-width: 2.2em !important; + height: 2.4em; + align-self: end; + line-height: 1em; + border-radius: 0.5em; +} + +.gradio-button.secondary-down{ + background: var(--button-secondary-background-fill); + color: var(--button-secondary-text-color); +} +.gradio-button.secondary-down, .gradio-button.secondary-down:hover{ + box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset; +} +.gradio-button.secondary-down:hover{ + background: var(--button-secondary-background-fill-hover); + color: var(--button-secondary-text-color-hover); +} + +button.custom-button{ + border-radius: var(--button-large-radius); + padding: var(--button-large-padding); + font-weight: var(--button-large-text-weight); + border: var(--button-border-width) solid var(--button-secondary-border-color); + background: var(--button-secondary-background-fill); + color: var(--button-secondary-text-color); + font-size: var(--button-large-text-size); + display: inline-flex; + justify-content: center; + align-items: center; + transition: var(--button-transition); + box-shadow: var(--button-shadow); + text-align: center; +} + +div.block.gradio-accordion { + border: 1px solid var(--block-border-color) !important; + border-radius: 8px !important; + margin: 2px 0; + padding: 8px 8px; +} + + +/* txt2img/img2img specific */ + +.block.token-counter{ + position: absolute; + display: inline-block; + right: 1em; + min-width: 0 !important; + width: auto; + z-index: 100; + top: -0.75em; +} + +.block.token-counter span{ + background: var(--input-background-fill) !important; + box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075); + border: 2px solid rgba(192,192,192,0.4) !important; + border-radius: 0.4em; +} + +.block.token-counter.error span{ + box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075); + border: 2px solid rgba(255,0,0,0.4) !important; +} + +.block.token-counter div{ + display: inline; +} + +.block.token-counter span{ + padding: 0.1em 0.75em; +} + +[id$=_subseed_show]{ + min-width: auto !important; + flex-grow: 0 !important; + display: flex; +} + +[id$=_subseed_show] label{ + margin-bottom: 0.65em; + align-self: end; +} + +[id$=_seed_extras] > div{ + gap: 0.5em; +} + +.html-log .comments{ + padding-top: 0.5em; +} + +.html-log .comments:empty{ + padding-top: 0; +} + +.html-log .performance { + font-size: 0.85em; + color: #444; + display: flex; +} + +.html-log .performance p{ + display: inline-block; +} + +.html-log .performance p.time, .performance p.vram, .performance p.time abbr, .performance p.vram abbr { + margin-bottom: 0; + color: var(--block-title-text-color); +} + +.html-log .performance p.time { +} + +.html-log .performance p.vram { + margin-left: auto; +} + +.html-log .performance .measurement{ + color: var(--body-text-color); + font-weight: bold; +} + +#txt2img_generate, #img2img_generate { + min-height: 4.5em; +} + +@media screen and (min-width: 2500px) { + #txt2img_gallery, #img2img_gallery { + min-height: 768px; + } +} + +.gradio-gallery .thumbnails img { + object-fit: scale-down !important; +} +#txt2img_actions_column, #img2img_actions_column { + gap: 0.5em; +} +#txt2img_tools, #img2img_tools{ + gap: 0.4em; +} + +.interrogate-col{ + min-width: 0 !important; + max-width: fit-content; + gap: 0.5em; +} +.interrogate-col > button{ + flex: 1; +} + +.generate-box{ + position: relative; +} +.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{ + position: absolute; + width: 50%; + height: 100%; + display: none; + background: #b4c0cc; +} +.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover{ + background: #c2cfdb; +} +.gradio-button.generate-box-interrupt{ + left: 0; + border-radius: 0.5rem 0 0 0.5rem; +} +.gradio-button.generate-box-skip{ + right: 0; + border-radius: 0 0.5rem 0.5rem 0; +} + +#img2img_scale_resolution_preview.block{ + display: flex; + align-items: end; +} + +#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{ + font-weight: bold; +} + +#txtimg_hr_finalres div.pending, #img2img_scale_resolution_preview div.pending { + opacity: 1; + transition: opacity 0s; +} + +.inactive{ + opacity: 0.5; +} + +[id$=_column_batch]{ + min-width: min(13.5em, 100%) !important; +} + +div.dimensions-tools{ + min-width: 1.6em !important; + max-width: fit-content; + flex-direction: column; + place-content: center; +} + +div#extras_scale_to_tab div.form{ + flex-direction: row; +} + +#img2img_sketch, #img2maskimg, #inpaint_sketch { + overflow: overlay !important; + resize: auto; + background: var(--panel-background-fill); + z-index: 5; +} + +.image-buttons > .form{ + justify-content: center; +} + +.infotext { + overflow-wrap: break-word; +} + +#img2img_column_batch{ + align-self: end; + margin-bottom: 0.9em; +} + +#img2img_unused_scale_by_slider{ + visibility: hidden; + width: 0.5em; + max-width: 0.5em; + min-width: 0.5em; +} + +/* settings */ +#quicksettings { + align-items: end; +} + +#quicksettings > div, #quicksettings > fieldset{ + max-width: 36em; + width: fit-content; + flex: 0 1 fit-content; + padding: 0; + border: none; + box-shadow: none; + background: none; +} +#quicksettings > div.gradio-dropdown{ + min-width: 24em !important; +} + +#settings{ + display: block; +} + +#settings > div{ + border: none; + margin-left: 10em; +} + +#settings > div.tab-nav{ + float: left; + display: block; + margin-left: 0; + width: 10em; +} + +#settings > div.tab-nav button{ + display: block; + border: none; + text-align: left; + white-space: initial; +} + +#settings_result{ + height: 1.4em; + margin: 0 1.2em; +} + +table.popup-table{ + background: var(--body-background-fill); + color: var(--body-text-color); + border-collapse: collapse; + margin: 1em; + border: 4px solid var(--body-background-fill); +} + +table.popup-table td{ + padding: 0.4em; + border: 1px solid rgba(128, 128, 128, 0.5); + max-width: 36em; +} + +table.popup-table .muted{ + color: #aaa; +} + +table.popup-table .link{ + text-decoration: underline; + cursor: pointer; + font-weight: bold; +} + +.ui-defaults-none{ + color: #aaa !important; +} + +#settings span{ + color: var(--body-text-color); +} + +#settings .gradio-textbox, #settings .gradio-slider, #settings .gradio-number, #settings .gradio-dropdown, #settings .gradio-checkboxgroup, #settings .gradio-radio{ + margin-top: 0.75em; +} + +#settings span .settings-comment { + display: inline +} + +.settings-comment a{ + text-decoration: underline; +} + +.settings-comment .info{ + opacity: 0.75; +} + +#sysinfo_download a.sysinfo_big_link{ + font-size: 24pt; +} + +#sysinfo_download a{ + text-decoration: underline; +} + +#sysinfo_validity{ + font-size: 18pt; +} + +#settings .settings-info{ + max-width: 48em; + border: 1px dotted #777; + margin: 0; + padding: 1em; +} + + +/* live preview */ +.progressDiv{ + position: absolute; + height: 20px; + background: #b4c0cc; + border-radius: 3px !important; + top: -20px; + width: 100%; +} + +.progress-container{ + position: relative; +} + +[id$=_results].mobile{ + margin-top: 28px; +} + +.dark .progressDiv{ + background: #424c5b; +} + +.progressDiv .progress{ + width: 0%; + height: 20px; + background: #0060df; + color: white; + font-weight: bold; + line-height: 20px; + padding: 0 8px 0 0; + text-align: right; + border-radius: 3px; + overflow: visible; + white-space: nowrap; + padding: 0 0.5em; +} + +.livePreview{ + position: absolute; + z-index: 300; + background: var(--background-fill-primary); + width: 100%; + height: 100%; +} + +.livePreview img{ + position: absolute; + object-fit: contain; + width: 100%; + height: calc(100% - 60px); /* to match gradio's height */ +} + +/* fullscreen popup (ie in Lora's (i) button) */ + +.popup-metadata{ + color: black; + background: white; + display: inline-block; + padding: 1em; + white-space: pre-wrap; +} + +.global-popup{ + display: flex; + position: fixed; + z-index: 1001; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(20, 20, 20, 0.95); +} + +.global-popup *{ + box-sizing: border-box; +} + +.global-popup-close:before { + content: "×"; +} + +.global-popup-close{ + position: fixed; + right: 0.25em; + top: 0; + cursor: pointer; + color: white; + font-size: 32pt; +} + +.global-popup-inner{ + display: inline-block; + margin: auto; + padding: 2em; +} + +/* fullpage image viewer */ + +#lightboxModal{ + display: none; + position: fixed; + z-index: 1001; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(20, 20, 20, 0.95); + user-select: none; + -webkit-user-select: none; + flex-direction: column; +} + +.modalControls { + display: flex; + position: absolute; + right: 0px; + left: 0px; + gap: 1em; + padding: 1em; + background-color:rgba(0,0,0,0); + z-index: 1; + transition: 0.2s ease background-color; +} +.modalControls:hover { + background-color:rgba(0,0,0,0.9); +} +.modalClose { + margin-left: auto; +} +.modalControls span{ + color: white; + text-shadow: 0px 0px 0.25em black; + font-size: 35px; + font-weight: bold; + cursor: pointer; + width: 1em; +} + +.modalControls span:hover, .modalControls span:focus{ + color: #999; + text-decoration: none; +} + +#lightboxModal > img { + display: block; + margin: auto; + width: auto; +} + +#lightboxModal > img.modalImageFullscreen{ + object-fit: contain; + height: 100%; + width: 100%; + min-height: 0; +} + +.modalPrev, +.modalNext { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; +} + +.modalNext { + right: 0; + border-radius: 3px 0 0 3px; +} + +.modalPrev:hover, +.modalNext:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +#imageARPreview { + position: absolute; + top: 0px; + left: 0px; + border: 2px solid red; + background: rgba(255, 0, 0, 0.3); + z-index: 900; + pointer-events: none; + display: none; +} + +/* context menu (ie for the generate button) */ + +#context-menu{ + z-index:9999; + position:absolute; + display:block; + padding:0px 0; + border:2px solid #a55000; + border-radius:8px; + box-shadow:1px 1px 2px #CE6400; + width: 200px; +} + +.context-menu-items{ + list-style: none; + margin: 0; + padding: 0; +} + +.context-menu-items a{ + display:block; + padding:5px; + cursor:pointer; +} + +.context-menu-items a:hover{ + background: #a55000; +} + + +/* extensions */ + +#tab_extensions table{ + border-collapse: collapse; +} + +#tab_extensions table td, #tab_extensions table th{ + border: 1px solid #ccc; + padding: 0.25em 0.5em; +} + +#tab_extensions table input[type="checkbox"]{ + margin-right: 0.5em; + appearance: checkbox; +} + +#tab_extensions button{ + max-width: 16em; +} + +#tab_extensions input[disabled="disabled"]{ + opacity: 0.5; +} + +.extension-tag{ + font-weight: bold; + font-size: 95%; +} + +#available_extensions .info{ + margin: 0; +} + +#available_extensions .info{ + margin: 0.5em 0; + display: flex; + margin-top: auto; + opacity: 0.80; + font-size: 90%; +} + +#available_extensions .date_added{ + margin-right: auto; + display: inline-block; +} + +#available_extensions .star_count{ + margin-left: auto; + display: inline-block; +} + +/* replace original footer with ours */ + +footer { + display: none !important; +} + +#footer{ + text-align: center; +} + +#footer div{ + display: inline-block; +} + +#footer .versions{ + font-size: 85%; + opacity: 0.85; +} + +/* extra networks UI */ + +.extra-network-cards{ + height: calc(100vh - 24rem); + overflow: clip scroll; + resize: vertical; + min-height: 52rem; +} + +.extra-networks > div.tab-nav{ + min-height: 3.4rem; +} + +.extra-networks > div > [id *= '_extra_']{ + margin: 0.3em; +} + +.extra-network-subdirs{ + padding: 0.2em 0.35em; +} + +.extra-network-subdirs button{ + margin: 0 0.15em; +} +.extra-networks .tab-nav .search, +.extra-networks .tab-nav .sort, +.extra-networks .tab-nav .show-dirs +{ + margin: 0.3em; + align-self: center; + width: auto; +} + +.extra-networks .tab-nav .search { + width: 16em; + max-width: 16em; +} + +.extra-networks .tab-nav .sort { + width: 12em; + max-width: 12em; +} + +#txt2img_extra_view, #img2img_extra_view { + width: auto; +} + +.extra-network-cards .nocards{ + margin: 1.25em 0.5em 0.5em 0.5em; +} + +.extra-network-cards .nocards h1{ + font-size: 1.5em; + margin-bottom: 1em; +} + +.extra-network-cards .nocards li{ + margin-left: 0.5em; +} + + +.extra-network-cards .card .button-row{ + display: none; + position: absolute; + color: white; + right: 0; + z-index: 1 +} +.extra-network-cards .card:hover .button-row{ + display: flex; +} + +.extra-network-cards .card .card-button{ + color: white; +} + +.extra-network-cards .card .metadata-button:before{ + content: "🛈"; +} + +.extra-network-cards .card .edit-button:before{ + content: "🛠"; +} + +.extra-network-cards .card .card-button { + text-shadow: 2px 2px 3px black; + padding: 0.25em 0.1em; + font-size: 200%; + width: 1.5em; +} +.extra-network-cards .card .card-button:hover{ + color: red; +} + + +.standalone-card-preview.card .preview{ + position: absolute; + object-fit: cover; + width: 100%; + height:100%; +} + +.extra-network-cards .card, .standalone-card-preview.card{ + display: inline-block; + margin: 0.5rem; + width: 16rem; + height: 24rem; + box-shadow: 0 0 5px rgba(128, 128, 128, 0.5); + border-radius: 0.2rem; + position: relative; + + background-size: auto 100%; + background-position: center; + overflow: hidden; + cursor: pointer; + + background-image: url('./file=html/card-no-preview.png') +} + +.extra-network-cards .card:hover{ + box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35); +} + +.extra-network-cards .card .actions .additional{ + display: none; +} + +.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 0.25em 0.25em rgba(0,0,0,0.5); + text-shadow: 0 0 0.2em black; +} + +.extra-network-cards .card .actions *{ + color: white; +} + +.extra-network-cards .card .actions .name{ + font-size: 1.7em; + font-weight: bold; + line-break: anywhere; +} + +.extra-network-cards .card .actions .description { + display: block; + max-height: 3em; + white-space: pre-wrap; + line-height: 1.1; +} + +.extra-network-cards .card .actions .description:hover { + max-height: none; +} + +.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 ul a:hover{ + color: red; +} + +.extra-network-cards .card .preview{ + position: absolute; + object-fit: cover; + width: 100%; + height:100%; +} + +div.block.gradio-box.edit-user-metadata { + width: 56em; + background: var(--body-background-fill); + padding: 2em !important; +} + +.edit-user-metadata .extra-network-name{ + font-size: 18pt; + color: var(--body-text-color); +} + +.edit-user-metadata .file-metadata{ + color: var(--body-text-color); +} + +.edit-user-metadata .file-metadata th{ + text-align: left; +} + +.edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{ + padding: 0.3em 1em; + overflow-wrap: anywhere; + word-break: break-word; +} + +.edit-user-metadata .wrap.translucent{ + background: var(--body-background-fill); +} +.edit-user-metadata .gradio-highlightedtext span{ + word-break: break-word; +} + +.edit-user-metadata-buttons{ + margin-top: 1.5em; +} + + + + +div.block.gradio-box.popup-dialog, .popup-dialog { + width: 56em; + background: var(--body-background-fill); + padding: 2em !important; +} + +div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{ + margin-top: 1em; +} + +div.block.input-accordion{ + +} + +.input-accordion-extra{ + flex: 0 0 auto !important; + margin: 0 0.5em 0 auto; +} + +div.accordions > div.input-accordion{ + min-width: fit-content !important; +} + +div.accordions > div.gradio-accordion .label-wrap span{ + white-space: nowrap; + margin-right: 0.25em; +} + +div.accordions{ + gap: 0.5em; +} + +div.accordions > div.input-accordion.input-accordion-open{ + flex: 1 auto; + flex-flow: column; +} + + +/* sticky right hand columns */ + +#img2img_results, #txt2img_results, #extras_results { + position: sticky; + top: 0.5em; +} + +body.resizing { + cursor: col-resize !important; +} + +body.resizing * { + pointer-events: none !important; +} + +body.resizing .resize-handle { + pointer-events: initial !important; +} + +.resize-handle { + position: relative; + cursor: col-resize; + grid-column: 2 / 3; + min-width: 16px !important; + max-width: 16px !important; + height: 100%; +} + +.resize-handle::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 7.5px; + border-left: 1px dashed var(--border-color-primary); } -/*BREAKPOINT_CSS_CONTENT*/ \ No newline at end of file