Upload sd-webui-tabs-extension using SD-Hub

sd-webui-tabs-extension/.gitignore

@@ -0,0 +1,2 @@
+__pycache__
+tab_configs.csv

sd-webui-tabs-extension/.ipynb_checkpoints/tab_configs-checkpoint.csv

@@ -0,0 +1,119 @@
+,txt,img
+default,left,right
+tabs,left,right
+🎛️ Frequency Separation Enhancement,keep,keep
+💤 Lazy Pony Prompter,left,right
+Пороги (до 8 правил),keep,keep
+ADetailer,left,right
+Advanced settings,left,right
+AgentAttention,left,right
+Alternate Init Noise,left,left
+Amateur Filter,left,right
+Anti Burn (average smoothing of last steps images),left,right
+Apply licyk style,left,right
+Aspect Ratio to Width/Height,left,right
+Asymmetric tiling,left,right
+Batched Hires (reduce Batch size for Hires. fix),left,left
+BMAB,left,right
+Booru Link to Prompt,left,right
+Booru Tag Inserter,left,right
+Booru to WD,left,right
+CADS,left,right
+Calculate Aspect Ratio,keep,keep
+CD Tuner,left,right
+CFG fade,left,right
+CFG Rescale,keep,keep
+Channel Offset,keep,keep
+Characteristic Guidance (CHG),left,right
+Characteristic Guidance Turbo (CHG),left,right
+Chunk Weight,keep,keep
+Color Correction,left,right
+Colorful Noise,left,right
+Colorization,left,right
+Common Landscape Aspect Ratios,keep,keep
+Composable Lora,left,right
+Compressor,keep,keep
+Cond Blastr,left,right
+Conditioning Highres,left,right
+ControlNet,left,right
+ControlNet-I2I-sequence-toyxyz,left,right
+ControlNet-M2M,left,right
+Cubemap Tiling,left,right
+Custom Hires Fix,keep,keep
+Cutoff,left,right
+DanBooru Link,left,right
+DanTagGen,left,right
+DemoFusion,left,right
+Detail Daemon,left,right
+Diffusion CG,keep,keep
+DiffusionCocktail,left,right
+DyCFG,left,right
+Dynamic Lora Weights,left,right
+Dynamic Thresholding (CFG Scale Fix),left,right
+Extra Samplers,left,right
+FABRIC,left,right
+First Block Cache,left,right
+Forge Couple,left,right
+FreeU,left,right
+Global Prompts,left,right
+HighRes fix: override CFG and Distilled CFG,left,right
+Hires. Fix (txt2img + img2img),left,right
+Image Filters,left,right
+img2img Hires Fix,left,right
+Incantations,left,right
+Inpaint Mask Tools,keep,keep
+Kohya Hires.fix,keep,keep
+Large Initial Thresholding for Forge,left,right
+Latent Couple,left,right
+Latent Drift Correction,left,right
+Latent Mirroring,left,right
+Latent Playground,left,left
+LoRA Block Weight,left,right
+Lora Masks,left,right
+Masa Control,keep,keep
+Merge Options,left,right
+Multiple Hypernetworks,left,right
+NegPiP,left,right
+Neutral Prompt,left,right
+Noise Color Picker,left,left
+Noise scheduler modifier,left,right
+Overlay,left,right
+Parameters info,left,right
+Perturbed Attention Guidance,left,right
+Photo Refiner 2.0,left,right
+picBatchWork,left,right
+Pick CLIP,left,right
+Predefined Aspect Ratios,left,right
+Prompt Refactor,left,right
+Quick Recents,left,right
+Ranbooru,left,right
+Regional Prompter,left,right
+ReSharpen,left,right
+Samplers Scheduler Seniorious,left,right
+ScaleCrafter,keep,keep
+Scheduler Override,left,right
+Scramble Prompts [M9],left,right
+Scripts,keep,keep
+SDXL Latent Tweaking,left,right
+SDXL Resolution Picker,left,right
+SDXL Resolutions,left,right
+SDXL Styles,left,right
+Seed Travel Extras...,left,right
+Self Attention Guidance,left,right
+Semantic Guidance,left,right
+Skimmed CFG,left,right
+Snakeoil CFG for reForge,left,right
+Some Image Effects,left,right
+SSaSD,left,right
+Symmetry,keep,keep
+TeaCache,left,right
+Tiled Diffusion,left,right
+Tiled VAE,left,right
+Trip Clip Skip,left,right
+Tweak Weights [M9],left,right
+Txt2img → Img2img,left,right
+Vectorscope CC,left,right
+Workflow,left,right
+XL Vec,left,right
+Yet Another VAE Tiling,left,right
+µ Detection Detailer,left,right

sd-webui-tabs-extension/LICENSE

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

sd-webui-tabs-extension/README.md

@@ -0,0 +1,71 @@
+# SD Webui Tabs Extension
+This is an Extension for the [Automatic1111 Webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui), which replaces the regular Extension layout with a **Tabs** layout instead.
+
+> Compatible with [Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge)
+
+<p align="center">
+<img src="ui.png" width=768><br>
+<sup>(<a href="https://github.com/Haoming02/catppuccin-theme">Catppuccin Theme</a>)</sup>
+</p>
+
+## Features
+This was achieved by moving the "contents" of each Extension from the "**Accordion**" *(the dropdown thingy)* into their own separate **Tab**. So now you only need to switch between each tab to change the parameters, rather than scrolling all the way every single time.
+
+When an Extension is enabled, the respective Tab button will be highlighted in the specified color[*](#settings) to indicate that. Additionally, you can `Ctrl + Click` the Tab button to quickly toggle the Extension.
+
+> [!Note]
+> - This tries to find the first **Checkbox** with a label containing "enable" or "active" within the Extension. If one is not found, this feature will not be available for said Extension.
+> - For ControlNet, this only works on the first Unit. Still thinking of a better solution...
+
+## Configs
+After launching the Webui with this Extension installed, it will generate a `tab_configs.csv` file inside the folder. You can edit this file with any text editing program *(**eg.** `Notepad`)* or spreadsheet program *(**eg.** `Excel`)* to change where each element is placed:
+
+- <ins><b>entries</b></ins>
+    - `tabs` entry controls where the buttons for the Tabs are placed
+    - `default` entry controls where new Extensions should be placed
+    - `Scripts` entry refers to the Scripts dropdown
+    - `Extra Options` entry refers to the  `Settings for txt2img/img2img` *(if enabled in settings)*
+    - The rest of the entries are the names of your installed extensions
+
+- <ins><b>placement</b></ins>
+    - `left` side refers to under the parameters *(the original location)*
+    - `right` side refers to under the generation gallery
+    - `above` refers to above the tab buttons entry
+    - `below` refers to below the tab buttons entry
+    - `hide` will not show the extension
+        - Mainly for extensions with always-active features
+    - `keep` will not move the extension at all
+        - Mainly for extensions with custom UIs that are not supported:
+
+> [!Important]
+> This Extension **only** supports Extensions whose UIs are defined under either `gr.Accordion` or `modules.ui_components.InputAccordion`. If you have some exotic Extensions that ~~like to reinvent the wheels and therefore~~ are not showing up correctly, set it to `keep` instead
+
+> [!Important]
+> If you edited the `.csv` file while the Webui is active, you should click **Reload UI** to apply the changes *(not just refresh the browser)*
+
+- <ins><b>Example Config:</b></ins>
+
+    |       | txt | img |
+    |-------|-----|-----|
+    |  tabs | left|right|
+    |default| left|right|
+    |ar-plus|above|above|
+    |  ...  | left|right|
+    |  ...  | keep| keep|
+    |  ...  | left|right|
+    |Scripts|below|below|
+
+## Settings
+> The settings are in the **Tabs Extension** section under the <ins>User Interface</ins> category
+
+- **Delay:** This Extension moves the contents after a tiny delay to prevent breaking some references
+    - If you have a slow machine, you *may* need to increase the delay
+- **Color:** The CSS color used to indicate active extensions *(**default:** `GreenYellow`)*
+- **Version:** Hide the version number for the Extensions *(**not** recommended)*
+- **Forge:** Hide the "Integrated" text for the built-in Extensions
+- **Sort:** By default, extensions are sorted based on their order of appearance *(**ie.** The folder names or the `sorting_priority` variable)*; Enable this to sort them based on the order in the `tab_configs.csv`
+- **Toggle:** Allow you to click on the button of an opened tab to hide it instead
+- **Scripts Toggle:** Additionally allow you to `Ctrl + Click` on the `Scripts` button, to toggle the dropdown between the currently selected script and `None`
+- **RMB:** Use `Right Click` instead of `Ctrl + Click` to toggle the Extensions
+- **Open:** By default, the first extension is shown; Disable this to hide all the extensions on start up instead
+- **Hide Container:** By default, this Extension only moves the contents and hide the Accordions, leaving the extension container untouched. When using certain themes that add margins and paddings, the container may show up as an empty block instead. If you do not have any leftover extensions in the container *(**ie.** Those without Accordion in its UI)*, you can hide the entire container instead.

sd-webui-tabs-extension/javascript/tabs_configs.js

@@ -0,0 +1,108 @@
+class TabsExtensionConfigs {
+    #settings = {};
+
+    /** @returns {boolean} */  get container() { return this.#settings.container; }
+    /** @returns {boolean} */  get forge() { return this.#settings.forge; }
+    /** @returns {boolean} */  get open() { return this.#settings.open; }
+    /** @returns {boolean} */  get sort() { return this.#settings.sort; }
+    /** @returns {boolean} */  get toggle() { return this.#settings.toggle; }
+    /** @returns {boolean} */  get scripts_toggle() { return this.#settings.scripts_toggle; }
+    /** @returns {boolean} */  get rmb() { return this.#settings.rmb; }
+    /** @returns {boolean} */  get version() { return this.#settings.version; }
+
+    constructor() {
+        const settingsIDs = [
+            ['container', 'checkbox'],
+            ['forge', 'checkbox'],
+            ['open', 'checkbox'],
+            ['sort', 'checkbox'],
+            ['toggle', 'checkbox'],
+            ['scripts_toggle', 'checkbox'],
+            ['rmb', 'checkbox'],
+            ['version', 'checkbox']
+        ];
+
+        for (const [key, type] of settingsIDs) {
+            const wrapper = document.getElementById(`setting_tabs_ex_${key}`);
+            const element = wrapper?.querySelector(`input[type=${type}]`);
+            this.#settings[key] = (type === 'checkbox') ? !!element?.checked : (element?.value ?? "");
+        }
+    }
+
+    /** @param {string} name @param {string} mode @return {string} */
+    #validateMode(name, mode) {
+        const availableModes = (name === "tabs")
+            ? ["left", "right"]
+            : ["left", "right", "above", "below", "hide", "keep"];
+        return availableModes.includes(mode) ? mode : availableModes[0];
+    }
+
+    /**
+     * CSV -> Dict
+     * @return {Object.<string, Object.<string, string>>}
+     */
+    parseConfigs() {
+        try {
+            const config = { "txt": {}, "img": {} };
+            const holder = document.getElementById('TABSEX_LBL');
+            const textarea = holder?.querySelector('textarea');
+            const raw = textarea?.value ?? "";
+
+            const lines = raw.trim().split('\n').slice(1).filter(Boolean);
+            for (const line of lines) {
+                const [ext, t, i] = line.split(',').map(col => (col ?? '').trim());
+                if (!ext) continue;
+                config["txt"][ext] = this.#validateMode(ext, t);
+                config["img"][ext] = this.#validateMode(ext, i);
+            }
+
+            // пусто? вернём дефолт
+            if (Object.keys(config.txt ?? {}).length === 0) {
+                return {
+                    "txt": { 'tabs': 'left', 'default': 'left' },
+                    "img": { 'tabs': 'right', 'default': 'right' }
+                };
+            }
+            return config;
+        } catch (_e) {
+            alert(`[Tabs Extension]: Something went wrong while parsing the configs... Using defaults.`);
+            return {
+                "txt": { 'tabs': 'left', 'default': 'left' },
+                "img": { 'tabs': 'right', 'default': 'right' }
+            };
+        }
+    }
+
+    /**
+     * Dict -> CSV (фиксированный порядок)
+     * @param {Object.<string, Object.<string, string>>} config
+     */
+    saveConfigs(config) {
+        const holder = document.getElementById('TABSEX_LBL');
+        const textarea = holder?.querySelector('textarea');
+        if (!textarea) return;
+
+        const data = [",txt,img"];
+
+        const keys = Array.from(new Set([
+            ...Object.keys(config["txt"] || {}),
+            ...Object.keys(config["img"] || {})
+        ])).sort((a, b) => {
+            const aHead = (a === 'tabs' || a === 'default');
+            const bHead = (b === 'tabs' || b === 'default');
+            if (aHead && !bHead) return -1;
+            if (!aHead && bHead) return 1;
+            return a.localeCompare(b);
+        });
+
+        for (const key of keys) {
+            data.push([key, config["txt"][key] ?? "", config["img"][key] ?? ""].join(","));
+        }
+
+        textarea.value = data.join("\n");
+        if (typeof updateInput === 'function') updateInput(textarea);
+
+        const btn = document.getElementById('TABSEX_BTN');
+        btn?.click();
+    }
+}

sd-webui-tabs-extension/javascript/tabs_ex.js

@@ -0,0 +1,314 @@
+// TabsExtension — организация вкладок расширений + поиск по вкладкам
+// ECMAScript 2020+, A1111/Forge совместим
+
+class TabsExtension {
+
+    /** @type {TabsExtensionConfigs} */
+    static #config;
+
+    /** Активные вкладки по режимам */
+    /** @type {Object.<string, string|null>} */
+    static #activeExtension = { "txt": null, "img": null };
+
+    /** Пары "чекбокс включения" <-> "кнопка вкладки" для подсветки active */
+    /** @type {Array.<[HTMLInputElement, HTMLButtonElement]>} */
+    static #enablePairs = [];
+
+    /** Таймер отложенного обновления подсветки active */
+    /** @type {number|null} */
+    static #refreshQueue = null;
+
+    /** @param {HTMLDivElement} extension @returns {HTMLInputElement|null} */
+    static #tryFindEnableToggle(extension) {
+        let temp = null;
+        for (const checkbox of extension.querySelectorAll('input[type=checkbox]')) {
+            const labelText = checkbox.parentNode?.querySelector('span')?.textContent?.toLowerCase();
+            if (labelText?.includes('enable')) return checkbox;
+            if (!temp && labelText?.includes('active')) temp = checkbox;
+        }
+        return temp;
+    }
+
+    /** Синхронизация active-подсветки кнопок с реальным состоянием чекбоксов */
+    static #refreshEnableCheckbox() {
+        if (this.#refreshQueue) clearTimeout(this.#refreshQueue);
+        this.#refreshQueue = window.setTimeout(() => {
+            for (const [toggle, button] of this.#enablePairs) {
+                if (toggle.checked) button.classList.add('active');
+                else button.classList.remove('active');
+            }
+        }, 250);
+    }
+
+    /**
+     * Сортировка расширений по конфигу, если включено
+     * @param {Object.<string, HTMLDivElement>} extensions
+     * @param {Object.<string, string>} configs
+     * @returns {Object.<string, HTMLDivElement>}
+     */
+    static #sort_extensions(extensions, configs) {
+        if (!this.#config.sort) return extensions;
+        const sorted = {};
+        for (const key of Object.keys(configs)) {
+            if (Object.prototype.hasOwnProperty.call(extensions, key)) {
+                sorted[key] = extensions[key];
+                delete extensions[key];
+            }
+        }
+        for (const key of Object.keys(extensions)) sorted[key] = extensions[key];
+        return sorted;
+    }
+
+    /**
+     * Главная раскладка
+     * @param {'txt'|'img'} mode
+     * @param {Object.<string, HTMLDivElement>} extensions
+     * @param {Object.<string, string>} configs
+     * @returns {Object.<string, string>}
+     */
+    static #setup_tabs(mode, extensions, configs) {
+        const container = {
+            'left': document.getElementById(`${mode}2img_script_container`),
+            'right': document.getElementById(`${mode}2img_results`)
+        };
+
+        /** @type {string} */ const mainSide = configs['tabs'];
+        /** @type {string} */ const oppSide = (mainSide === 'left') ? 'right' : 'left';
+
+        // Если вдруг контейнеров нет — выходим аккуратно
+        if (!container[mainSide] || !container[oppSide]) return configs;
+
+        // Заготовим области
+        const extensionContainers = {};
+        for (const side of ['above', 'left', 'below', 'right']) {
+            const div = document.createElement("div");
+            div.id = `tabs_ex_content-${mode}2img-${side}`;
+            div.style.overflow = "visible";
+            extensionContainers[side] = div;
+        }
+
+        const buttonContainer = document.createElement("div");
+        extensionContainers[mainSide].appendChild(buttonContainer);
+        buttonContainer.id = `tabs_ex_${mode}`;
+
+        container[mainSide].appendChild(extensionContainers['above']);
+        container[mainSide].appendChild(extensionContainers[mainSide]);
+        container[mainSide].appendChild(extensionContainers['below']);
+        container[oppSide].appendChild(extensionContainers[oppSide]);
+
+        /** Карта: ключ вкладки -> кнопка */
+        /** @type {Object.<string, HTMLButtonElement>} */
+        const allButtons = {};
+
+        // === Поиск по вкладкам (компактный) ===
+        const searchWrapper = document.createElement("div");
+        searchWrapper.style.display = "flex";
+        searchWrapper.style.justifyContent = "center";
+        searchWrapper.style.width = "100%";
+        searchWrapper.style.marginBottom = "6px";
+
+        const searchInput = document.createElement("input");
+        searchInput.type = "text";
+        searchInput.placeholder = "Filter extensions...";
+        searchInput.autocomplete = "off";
+        searchInput.style.width = "100%";
+        searchInput.style.maxWidth = "480px";  // чтобы не расползался как на скрине
+        searchInput.style.minWidth = "240px";
+        searchInput.style.padding = "6px 10px";
+        searchInput.style.borderRadius = "6px";
+        searchInput.style.border = "1px solid var(--block-border-color, #444)";
+
+        searchWrapper.appendChild(searchInput);
+        buttonContainer.appendChild(searchWrapper);
+
+        const self = this; // нужен доступ к #activeExtension внутри коллбэка
+        const applyFilter = (queryText) => {
+            const q = (queryText || "").trim().toLowerCase();
+            for (const [tabKey, btn] of Object.entries(allButtons)) {
+                const label = (btn.textContent || "").toLowerCase();
+                btn.style.display = (q.length === 0 || label.includes(q)) ? "" : "none";
+            }
+            // если активная вкладка скрыта фильтром — мягко гасим её контент
+            const active = self.#activeExtension[mode];
+            if (active && allButtons[active] && allButtons[active].style.display === "none") {
+                allButtons[active].classList.remove('selected');
+                if (extensions[active]) extensions[active].style.display = "none";
+                self.#activeExtension[mode] = null;
+            }
+        };
+        searchInput.addEventListener("input", (e) => applyFilter(e.target.value));
+
+        // Кнопки и раскладка
+        for (const tabKey of Object.keys(extensions)) {
+            if (!Object.prototype.hasOwnProperty.call(configs, tabKey)) {
+                configs[tabKey] = configs['default']; // новое расширение — дефолтная зона
+            }
+
+            const pos = configs[tabKey];
+            if (pos === "hide") continue;
+
+            if (pos === "above" || pos === "below") {
+                extensionContainers[pos].appendChild(extensions[tabKey]);
+                extensions[tabKey].style.display = "block";
+                continue;
+            }
+
+            // Подпись кнопки
+            const btnSpan = document.createElement('span');
+            btnSpan.className = 'tab_label';
+
+            const extensionName = (this.#config.version)
+                ? tabKey
+                : extensions[tabKey].getAttribute("ext-label");
+
+            btnSpan.textContent = (!this.#config.forge)
+                ? extensionName
+                : (extensionName || "").split('Integrated')[0].trim();
+
+            // Кнопка вкладки
+            const tabButton = document.createElement("button");
+            tabButton.classList.add('tab_button');
+            tabButton.appendChild(btnSpan);
+
+            buttonContainer.appendChild(tabButton);
+            allButtons[tabKey] = tabButton;
+
+            tabButton.addEventListener("click", (e) => {
+                // режим RMB: Ctrl/Cmd не перехватываем
+                if (!this.#config.rmb && (e.ctrlKey || e.metaKey)) return;
+
+                if (this.#activeExtension[mode] != null) {
+                    allButtons[this.#activeExtension[mode]]?.classList.remove('selected');
+                    const prev = this.#activeExtension[mode];
+                    if (prev && extensions[prev]) extensions[prev].style.display = "none";
+                }
+
+                this.#activeExtension[mode] = (
+                    (this.#config.toggle) && (this.#activeExtension[mode] === tabKey)
+                ) ? null : tabKey;
+
+                if (this.#activeExtension[mode] != null) {
+                    allButtons[this.#activeExtension[mode]]?.classList.add('selected');
+                    extensions[this.#activeExtension[mode]].style.display = "block";
+                }
+            });
+
+            // Переносим содержимое вкладки в нужную сторону
+            extensionContainers[configs[tabKey]].appendChild(extensions[tabKey]);
+
+            // Особый случай: Scripts
+            if (tabKey === 'Scripts') {
+                const scriptsDropdown = extensions[tabKey].querySelector('input');
+
+                const observer = new MutationObserver(() => {
+                    if (!scriptsDropdown) return;
+                    if (scriptsDropdown.value !== 'None') allButtons['Scripts']?.classList.add('active');
+                    else allButtons['Scripts']?.classList.remove('active');
+                });
+                observer.observe(extensions[tabKey], { childList: true, subtree: true });
+
+                if (this.#config.scripts_toggle) {
+                    const btn = document.getElementById(`TABSEX_${mode}2img_s_toggle`);
+                    if (btn) {
+                        if (this.#config.rmb) {
+                            allButtons[tabKey].addEventListener("contextmenu", (e) => {
+                                e.preventDefault(); btn.click(); return false;
+                            });
+                        } else {
+                            allButtons[tabKey].addEventListener("click", (e) => {
+                                if (e.ctrlKey || e.metaKey) btn.click();
+                            });
+                        }
+                    }
+                }
+                continue;
+            }
+
+            // Подсветка активных по чекбоксу Enable/Active
+            const enableToggle = this.#tryFindEnableToggle(extensions[tabKey]);
+            if (!enableToggle) continue;
+
+            if (this.#config.rmb) {
+                allButtons[tabKey].addEventListener("contextmenu", (e) => {
+                    e.preventDefault(); enableToggle.click(); return false;
+                });
+            } else {
+                allButtons[tabKey].addEventListener("click", (e) => {
+                    if (e.ctrlKey || e.metaKey) enableToggle.click();
+                });
+            }
+
+            if (enableToggle.checked) allButtons[tabKey].classList.add('active');
+            this.#enablePairs.push([enableToggle, allButtons[tabKey]]);
+        }
+
+        // Чистим пустые области
+        for (const side of ['above', 'left', 'below', 'right']) {
+            if (extensionContainers[side].children.length === 0) {
+                extensionContainers[side].remove();
+            }
+        }
+
+        if (this.#config.open) {
+            const firstBtn = Object.values(allButtons)[0];
+            if (firstBtn) firstBtn.click();
+        }
+
+        return configs;
+    }
+
+    /** Точка входа */
+    static init() {
+        this.#config = new TabsExtensionConfigs();
+        const configs = this.#config.parseConfigs();
+        const processedConfigs = {};
+
+        for (const mode of ['txt', 'img']) {
+            let extensions = null;
+
+            const keepExtensions = Object.keys(configs[mode])
+                .filter((ext) => configs[mode][ext] === "keep");
+
+            try {
+                const parsed = TabsExtensionParser.parse(mode, keepExtensions);
+                extensions = this.#sort_extensions(parsed, configs[mode]);
+            } catch (e) {
+                alert(`[TabsExtension] Something went wrong while parsing ${mode}2img extensions:\n${e}`);
+                continue;
+            }
+
+            try {
+                processedConfigs[mode] = this.#setup_tabs(mode, extensions, configs[mode]);
+                if (this.#config.container) {
+                    const styler = document.getElementById(`${mode}2img_script_container`)
+                        ?.querySelector(".styler");
+                    if (styler) styler.style.display = "none";
+                }
+            } catch (e) {
+                alert(`[TabsExtension] Something went wrong during ${mode}2img setup:\n${e}`);
+                continue;
+            }
+        }
+
+        try {
+            this.#config.saveConfigs(processedConfigs);
+        } catch (e) {
+            alert(`[TabsExtension] Something went wrong while saving configs:\n${e}`);
+        }
+
+        document.addEventListener("click", () => this.#refreshEnableCheckbox());
+    }
+}
+
+// Инициализация после загрузки UI
+(function () {
+    onUiLoaded(() => {
+        const slider = document.getElementById("setting_tabs_ex_delay")
+            ?.querySelector("input[type=range]");
+        const delay = parseInt(slider?.value ?? "50", 10);
+
+        setTimeout(() => {
+            if (typeof TabsExtension?.init === "function") TabsExtension.init();
+        }, Number.isNaN(delay) ? 50 : delay);
+    });
+})();

sd-webui-tabs-extension/javascript/tabs_parser.js

@@ -0,0 +1,176 @@
+// ECMAScript 2020+
+// Разбор расширений и подготовка для табов
+
+class TabsExtensionParser {
+
+    /** Клонируем label с чекбоксом и возвращаем именно label (или null)
+     * @param {boolean} enabled
+     * @returns {HTMLLabelElement|null}
+     */
+    static #cloneCheckbox(enabled) {
+        const base = document.getElementById("TABSEX_CHECKBOX");
+        if (!base) return null;
+
+        const label = base.querySelector('label')?.cloneNode(true);
+        if (!label) return null;
+
+        label.style.margin = "1em 0em";
+        label.checkbox = label.querySelector("input");
+        if (label.checkbox) label.checkbox.checked = !!enabled;
+        return label;
+    }
+
+    /**
+     * Убираем версию из имени (если есть). Пустые строки -> null.
+     * @param {string} name
+     * @returns {string|null}
+     */
+    static #sanitizeExtensionName(name) {
+        if (typeof name !== 'string' || name.trim().length === 0) return null;
+        const version_pattern = /([Vv](?:er)?[\.\s]*\d)/;
+        return name.split(version_pattern)[0].trim();
+    }
+
+    /**
+     * Разбор одного узла из контейнера расширений
+     * @param {HTMLDivElement} node
+     * @param {string[]} keep
+     * @returns {[string|null, HTMLDivElement|null]}
+     */
+    static #parseObject(node, keep) {
+        if (!node) return [null, null];
+
+        // Спец-случай: форма со списком скриптов
+        if (node.classList.contains("form")) {
+            const scripts = node.querySelector(".gradio-dropdown");
+            if (!scripts) return [null, null];
+
+            const script_block = document.createElement("div");
+            script_block.style.display = 'none';
+            scripts.style.margin = '10px 0px';
+            script_block.appendChild(scripts);
+
+            script_block.setAttribute("ext-label", "Scripts");
+            // прячем исходный form-узел, чтобы не было дубля; решение о дубликате принимает parse()
+            node.style.display = "none";
+            return ["Scripts", script_block];
+         }
+
+        const styler = node.querySelector(".styler");
+        if (!styler) return [null, null];
+
+        const accordion = node.querySelector(".gradio-accordion");
+        if (!accordion) return [null, null];
+
+        const isInput = accordion.classList.contains("input-accordion");
+
+        const displayName = accordion.querySelector(".label-wrap>span")?.textContent;
+        if (!displayName) return [null, null];
+
+        const extensionName = this.#sanitizeExtensionName(displayName);
+        if (!extensionName || keep.includes(extensionName)) return [null, null];
+
+        const contents = [...accordion.children].filter(
+            (div) => !div.classList.contains("hide")
+                  && !div.classList.contains("label-wrap")
+                  && div.children.length > 0
+        );
+
+        if (contents.length === 0) return [null, null];
+
+        const content = contents[0];
+
+        if (isInput) {
+            const checkbox = accordion.querySelector(".input-accordion-checkbox");
+            const dummy = this.#cloneCheckbox(checkbox?.checked ?? false);
+
+            // Ставим обработчики только если всё есть
+            if (dummy && dummy.checkbox && checkbox) {
+                dummy.checkbox.onchange = () => {
+                    if (checkbox.checked !== dummy.checkbox.checked) checkbox.click();
+                };
+                checkbox.onchange = () => {
+                    if (checkbox.checked !== dummy.checkbox.checked) dummy.checkbox.click();
+                };
+                content.insertBefore(dummy, content.firstElementChild);
+            }
+        }
+
+        // Прячем исходный блок с аккордеоном
+        node.style.display = "none";
+
+        // Переносим якорь на новый content (и переименовываем старый id безопасно)
+        if (accordion.id && !accordion.id.startsWith("component-")) {
+            content.id = accordion.id;
+            accordion.id = `moved-${accordion.id}`;
+
+            if (isInput) {
+                // Предотвращаем ошибки в консоли в сетапе webui
+                content.visibleCheckbox = { checked: null };
+                content.onVisibleCheckboxChange = () => {};
+            }
+        }
+
+        content.setAttribute("ext-label", displayName);
+        return [extensionName, content];
+    }
+
+    /**
+     * Доп. блок "Extra Options"
+     * @param {'txt'|'img'} mode
+     * @returns {[string|null, HTMLDivElement|null]}
+     */
+    static #extra_options(mode) {
+        const extra_options = document.getElementById(`extra_options_${mode}2img`);
+        if (!extra_options || !extra_options.classList.contains("gradio-accordion"))
+            return [null, null];
+
+        const styler = extra_options.parentElement;
+        if (styler) styler.style.display = "none";
+
+        const contents = [...extra_options.children].filter(
+            (div) => !div.classList.contains("hide")
+                  && !div.classList.contains("label-wrap")
+                  && div.children.length > 0
+        );
+        if (contents.length === 0) return [null, null];
+
+        const content = contents[0];
+        content.setAttribute("ext-label", "Extra Options");
+        return ["Extra Options", content];
+    }
+
+    /**
+     * Разбор всех расширений
+     * @param {'txt'|'img'} mode
+     * @param {string[]} keep
+     * @returns {Object.<string, HTMLDivElement>}
+     */
+    static parse(mode, keep) {
+        const validExtensions = {};
+
+        const container = document.getElementById(`${mode}2img_script_container`);
+        const styler = container?.querySelector(".styler");
+        if (!container || !styler) return validExtensions;
+
+        const children = Array.from(styler.children);
+        let foundScripts = false;  // флаг "Scripts уже встретился" в ЭТОМ контейнере
+
+        // Важно: НИЧЕГО больше не «скидываем» в Scripts — разбираем каждый узел отдельно.
+        for (const node of children) {
+            // не допускаем второй Scripts в пределах текущего контейнера
+            if (foundScripts && node.classList.contains("form")) {
+                node.style.display = "none";
+                continue;
+            }
+            const [name, content] = this.#parseObject(node, keep);
+            if (name && content) validExtensions[name] = content;
+            if (name === "Scripts") foundScripts = true;
+        }
+
+        const [extra, options] = this.#extra_options(mode);
+        if (extra && options) validExtensions[extra] = options;
+
+        return validExtensions;
+    }
+}

sd-webui-tabs-extension/scripts/tabs_config_io.py

@@ -0,0 +1,120 @@
+from modules.shared import opts
+from modules import scripts
+import gradio as gr
+import os.path
+
+
+CONFIG_FILE = os.path.join(scripts.basedir(), "tab_configs.csv")
+
+
+class TabsEx(scripts.Script):
+    sorting_priority = 8192
+    data: str = None
+
+    s_toggles: list[gr.components.Component] = None
+    t2i_done: bool = False
+
+    def __init__(self):
+        if TabsEx.data is None:
+            TabsEx.data = TabsEx._load_data()
+
+    def title(self):
+        return "Tabs Extension"
+
+    def show(self, is_img2img):
+        return None if is_img2img else scripts.AlwaysVisible
+
+    def ui(self, is_img2img):
+        if is_img2img:
+            return None
+
+        if getattr(opts, "tabs_ex_scripts_toggle", False):
+            with gr.Group(visible=False):
+                TabsEx.s_toggles = [
+                    gr.Button("T", elem_id="TABSEX_txt2img_s_toggle", interactive=True),
+                    gr.State(value="None"),
+                    gr.Button("T", elem_id="TABSEX_img2img_s_toggle", interactive=True),
+                    gr.State(value="None"),
+                ]
+
+            for comp in TabsEx.s_toggles:
+                comp.do_not_save_to_config = True
+
+        with gr.Column(visible=False):
+            dummy = gr.Checkbox(
+                label="Enable",
+                elem_id="TABSEX_CHECKBOX",
+                interactive=True,
+            )
+            label = gr.Textbox(
+                label="[TabsExtension] Configs",
+                elem_id="TABSEX_LBL",
+                value=TabsEx.data,
+            )
+
+            btn = gr.Button(value="save", elem_id="TABSEX_BTN")
+            btn.click(fn=self._write_data, inputs=[label], queue=False)
+
+        [setattr(comp, "do_not_save_to_config", True) for comp in (dummy, label, btn)]
+        return None
+
+    @staticmethod
+    def _load_data() -> str:
+        if not os.path.isfile(CONFIG_FILE):
+            return "\n".join(
+                [
+                    ",".join(["", "txt", "img"]),
+                    ",".join(["tabs", "left", "right"]),
+                    ",".join(["default", "left", "right"]),
+                ]
+            )
+
+        with open(CONFIG_FILE, "r", encoding="utf-8", errors="ignore") as csv_file:
+            return csv_file.read()
+
+    def _write_data(self, data: str):
+        try:
+            if data.strip() != TabsEx.data.strip():
+                print("\n[TabsExtension] Saving New Config...\n")
+                with open(CONFIG_FILE, "w+", encoding="utf-8") as csv_file:
+                    csv_file.write(data)
+        except Exception:
+            raise gr.Error("[TabsExtension] Failed to save config...")
+
+
+if getattr(opts, "tabs_ex_scripts_toggle", False):
+    from modules.script_callbacks import on_after_component
+
+    def after_component(component, **kwargs):
+        if kwargs.get("elem_id", None) != "script_list":
+            return
+
+        # на некоторых темах/сборках "script_list" может отличаться — не падаем
+        if not isinstance(component, gr.Dropdown):
+            return
+
+        if TabsEx.t2i_done is True:
+            btn, c = TabsEx.s_toggles[2:4]
+            ss: list = scripts.scripts_img2img.selectable_scripts
+        else:
+            btn, c = TabsEx.s_toggles[0:2]
+            ss: list = scripts.scripts_txt2img.selectable_scripts
+            TabsEx.t2i_done = True
+
+        def _toggle(current: int, cache: str):
+            if not current or current == "None":
+                _a: str = cache
+                _b: str = "None"
+            else:
+                _a: str = "None"
+                _b: str = ss[current - 1].title()
+            return [_a, _b]
+
+        btn.click(
+            fn=_toggle,
+            inputs=[component, c],
+            outputs=[component, c],
+            show_progress="hidden",
+        )
+
+    on_after_component(after_component)

sd-webui-tabs-extension/scripts/tabs_settings.py

@@ -0,0 +1,141 @@
+from modules.script_callbacks import on_ui_settings, on_before_ui
+from modules.shared import opts, OptionInfo
+
+
+def add_ui_settings():
+    from gradio import Slider
+
+    args = {"section": ("ui_tabs_ex", "Tabs Extension"), "category_id": "ui"}
+
+    opts.add_option(
+        "tabs_ex_delay",
+        OptionInfo(
+            50,
+            "Delay (ms) before moving the Extensions",
+            Slider,
+            {"minimum": 0, "maximum": 500, "step": 25},
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_act_color",
+        OptionInfo(
+            "greenyellow",
+            "Color for active Extensions",
+            **args,
+        )
+        .link("CSS", "https://www.w3schools.com/cssref/css_colors.php")
+        .needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_version",
+        OptionInfo(
+            False,
+            "Hide the version number",
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_forge",
+        OptionInfo(
+            False,
+            'Hide the "Integrated" text',
+            **args,
+        )
+        .info('for <a href="https://github.com/lllyasviel/stable-diffusion-webui-forge">Forge</a>')
+        .needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_sort",
+        OptionInfo(
+            False,
+            "Sort Extensions based on Configs",
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_toggle",
+        OptionInfo(
+            False,
+            "Allow hiding the extension content when clicking on the same tab button again",
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_scripts_toggle",
+        OptionInfo(
+            False,
+            "Allow Ctrl + Click to toggle the Scripts dropdown as well",
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_rmb",
+        OptionInfo(
+            False,
+            "Use Right Click instead of Ctrl + Click for toggling Extensions",
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_open",
+        OptionInfo(
+            True,
+            "Automatically show the first extension tab on startup",
+            **args,
+        ).needs_reload_ui(),
+    )
+
+    opts.add_option(
+        "tabs_ex_container",
+        OptionInfo(
+            False,
+            "Hide the Extension container",
+            **args,
+        )
+        .info("In certain configurations, the original Extension container will show up as an empty space in the Webui. You can enable this to hide the container")
+        .needs_reload_ui(),
+    )
+
+
+def load_ui_settings():
+    import os
+
+    color = getattr(opts, "tabs_ex_act_color", "greenyellow").strip().lower()
+
+    css_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), "style.css")
+    if not os.path.isfile(css_path):
+        # Создаём минимальный файл с нужной переменной
+        with open(css_path, "w", encoding="utf-8") as f:
+            f.write("body {\n    --tabs-highlight-color: %s;\n}\n" % color)
+        return
+
+    with open(css_path, "r", encoding="utf-8", errors="ignore") as f:
+        lines = f.readlines()
+
+    key = "--tabs-highlight-color:"
+    idx = next((i for i, line in enumerate(lines) if key in line), None)
+
+    if idx is not None:
+        prefix = lines[idx].split(":")[0]
+        lines[idx] = f"{prefix}: {color};\n"
+    else:
+        # Если строки нет — добавляем под body либо в конец
+        insert_at = len(lines)
+        for i, line in enumerate(lines):
+            if line.strip().startswith("body"):
+                insert_at = i + 1
+                break
+        lines.insert(insert_at, f"    --tabs-highlight-color: {color};\n")
+
+    with open(css_path, "w", encoding="utf-8") as f:
+        f.writelines(lines)
+

sd-webui-tabs-extension/style.css

@@ -0,0 +1,59 @@
+body {
+    --tabs-highlight-color: greenyellow;
+}
+
+#tabs_ex_txt, #tabs_ex_img {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+    margin: 8px 2px;
+    padding: 6px;
+    border-radius: 8px;
+    background-color: var(--background-fill-secondary);
+}
+
+#tabs_ex_txt .tab_button, #tabs_ex_img .tab_button {
+    margin: 4px;
+    padding: 2px 6px;
+    border: 2px;
+    border-style: ridge;
+    color: var(--button-secondary-text-color);
+    border-color: var(--block-info-text-color);
+    background-color: transparent;
+    transition: all 0.1s linear;
+    max-width: 240px;           /* не расползаться чрезмерно */
+    white-space: nowrap;        /* не переносить названия на 2 строки */
+    overflow: hidden;           /* скрыть хвост */
+    text-overflow: ellipsis;    /* троеточие для очень длинных имён */
+}
+
+#tabs_ex_txt .tab_button:hover, #tabs_ex_img .tab_button:hover {
+    box-shadow: 0px 0px 8px var(--button-secondary-text-color);
+}
+
+#tabs_ex_txt .tab_button.selected, #tabs_ex_img .tab_button.selected {
+    background-color: var(--border-color-accent);
+}
+
+#tabs_ex_txt .tab_button.active, #tabs_ex_img .tab_button.active {
+    color: var(--tabs-highlight-color);
+
+    /* Simulate Bold, without affecting the Width */
+    text-shadow: 0px 0px 2px var(--tabs-highlight-color);
+}
+
+#tabs_ex_content-txt2img-left,
+#tabs_ex_content-txt2img-right,
+#tabs_ex_content-txt2img-above,
+#tabs_ex_content-txt2img-below,
+#tabs_ex_content-img2img-left,
+#tabs_ex_content-img2img-right,
+#tabs_ex_content-img2img-above,
+#tabs_ex_content-img2img-below {
+    padding: 1em;
+    background-color: var(--block-background-fill);
+    border-radius: 8px;
+}

sd-webui-tabs-extension/tab_configs.csv

@@ -0,0 +1,119 @@
+,txt,img
+default,left,right
+tabs,left,right
+🎛️ Frequency Separation Enhancement,keep,keep
+💤 Lazy Pony Prompter,left,right
+Пороги (до 8 правил),keep,keep
+ADetailer,left,right
+Advanced settings,left,right
+AgentAttention,left,right
+Alternate Init Noise,left,left
+Amateur Filter,left,right
+Anti Burn (average smoothing of last steps images),left,right
+Apply licyk style,left,right
+Aspect Ratio to Width/Height,left,right
+Asymmetric tiling,left,right
+Batched Hires (reduce Batch size for Hires. fix),left,left
+BMAB,left,right
+Booru Link to Prompt,left,right
+Booru Tag Inserter,left,right
+Booru to WD,left,right
+CADS,left,right
+Calculate Aspect Ratio,keep,keep
+CD Tuner,left,right
+CFG fade,left,right
+CFG Rescale,keep,keep
+Channel Offset,keep,keep
+Characteristic Guidance (CHG),left,right
+Characteristic Guidance Turbo (CHG),left,right
+Chunk Weight,keep,keep
+Color Correction,left,right
+Colorful Noise,left,right
+Colorization,left,right
+Common Landscape Aspect Ratios,keep,keep
+Composable Lora,left,right
+Compressor,keep,keep
+Cond Blastr,left,right
+Conditioning Highres,left,right
+ControlNet,left,right
+ControlNet-I2I-sequence-toyxyz,left,right
+ControlNet-M2M,left,right
+Cubemap Tiling,left,right
+Custom Hires Fix,keep,keep
+Cutoff,left,right
+DanBooru Link,left,right
+DanTagGen,left,right
+DemoFusion,left,right
+Detail Daemon,left,right
+Diffusion CG,keep,keep
+DiffusionCocktail,left,right
+DyCFG,left,right
+Dynamic Lora Weights,left,right
+Dynamic Thresholding (CFG Scale Fix),left,right
+Extra Samplers,left,right
+FABRIC,left,right
+First Block Cache,left,right
+Forge Couple,left,right
+FreeU,left,right
+Global Prompts,left,right
+HighRes fix: override CFG and Distilled CFG,left,right
+Hires. Fix (txt2img + img2img),left,right
+Image Filters,left,right
+img2img Hires Fix,left,right
+Incantations,left,right
+Inpaint Mask Tools,keep,keep
+Kohya Hires.fix,keep,keep
+Large Initial Thresholding for Forge,left,right
+Latent Couple,left,right
+Latent Drift Correction,left,right
+Latent Mirroring,left,right
+Latent Playground,left,left
+LoRA Block Weight,left,right
+Lora Masks,left,right
+Masa Control,keep,keep
+Merge Options,left,right
+Multiple Hypernetworks,left,right
+NegPiP,left,right
+Neutral Prompt,left,right
+Noise Color Picker,left,left
+Noise scheduler modifier,left,right
+Overlay,left,right
+Parameters info,left,right
+Perturbed Attention Guidance,left,right
+Photo Refiner 2.0,left,right
+picBatchWork,left,right
+Pick CLIP,left,right
+Predefined Aspect Ratios,left,right
+Prompt Refactor,left,right
+Quick Recents,left,right
+Ranbooru,left,right
+Regional Prompter,left,right
+ReSharpen,left,right
+Samplers Scheduler Seniorious,left,right
+ScaleCrafter,keep,keep
+Scheduler Override,left,right
+Scramble Prompts [M9],left,right
+Scripts,keep,keep
+SDXL Latent Tweaking,left,right
+SDXL Resolution Picker,left,right
+SDXL Resolutions,left,right
+SDXL Styles,left,right
+Seed Travel Extras...,left,right
+Self Attention Guidance,left,right
+Semantic Guidance,left,right
+Skimmed CFG,left,right
+Snakeoil CFG for reForge,left,right
+Some Image Effects,left,right
+SSaSD,left,right
+Symmetry,keep,keep
+TeaCache,left,right
+Tiled Diffusion,left,right
+Tiled VAE,left,right
+Trip Clip Skip,left,right
+Tweak Weights [M9],left,right
+Txt2img → Img2img,left,right
+Vectorscope CC,left,right
+Workflow,left,right
+XL Vec,left,right
+Yet Another VAE Tiling,left,right
+µ Detection Detailer,left,right