Public/stable-diffusion-webui-ux
1
0
Fork 0
mirror of https://github.com/anapnoe/stable-diffusion-webui-ux.git synced 2026-04-09 10:11:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update to v.1.20.1

Browse Source
This commit is contained in:
anapnoe
2025-07-24 22:58:29 +03:00
parent d8cc7ad013
commit 9cbf226688
1762 changed files with 23023 additions and 752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -42,3 +42,5 @@ notification.mp3
/cache
trace.json
/sysinfo-????-??-??-??-??.json
/extensions-builtin/sd-webui-ux/.git
/sd_models.db

5
extensions-builtin/sd-webui-ux/.gitignore vendored
View File

@@ -1,4 +1,7 @@
__pycache__
package-lock.json
sd_webui_ux.db
node_modules
temp
temp
**/thumbnails/
user

112
extensions-builtin/sd-webui-ux/README.md
View File

@@ -1,25 +1,22 @@
# SD Web UI UX
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, utilizing the powerful [Gradio](https://www.gradio.app/) library. This cutting-edge browser interface offers an unparalleled level of customization and optimization for users, setting it apart from other web interfaces.
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
This extension is compatible with both backends: [Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) and [Stable Diffusion web UI Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge).
Compatible with both [Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) and [Stable Diffusion web UI Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge) backends.
Please note that while this extension focuses solely on frontend optimizations, [Stable Diffusion web UI UX](https://github.com/anapnoe/stable-diffusion-webui-ux), along with its variant [Stable Diffusion web UI UX Forge](https://github.com/anapnoe/stable-diffusion-webui-ux-forge), incorporates backend optimizations for an even better and faster user experience. Together, these changes ensure a more effective and enjoyable interaction with the application.
*This extension performs frontend optimizations **post-DOM load** (modifying elements after they're created), meaning developer tools may show initial resource allocation before optimizations apply. In contrast [Stable Diffusion web UI UX](https://github.com/anapnoe/stable-diffusion-webui-ux) & [Stable Diffusion web UI UX Forge](https://github.com/anapnoe/stable-diffusion-webui-ux-forge) implement **upstream backend optimizations** that prevent unnecessary element creation entirely, enabling faster performance from initialization.*
[🌟 Your Support Makes a Difference! 🌟](https://buymeacoffee.com/dayanbayah)
[💖 Your Support Makes a Difference! 💖](https://buymeacoffee.com/dayanbayah)
![](screenshot.png)
## Optimizations
- **Redundant Checkpoints & Extra Networks**: Removing redundant Checkpoints and "Extra Networks" (Textual Inversion, Lora, and Hypernetworks) from img2img to reduce duplicated images and event listeners.
- **Inline Event Listeners**: Eradicating inline event listeners from "Extra Networks" cards and action buttons.
- **Event Delegation Pattern**: Applying an event delegation pattern to further streamline the code by consolidating event handling for "Extra Networks" cards and action buttons.
- **Optimized Stylesheets**: Enhanced visual coherence by substituting all default Gradio stylesheets in the DOM with an optimized version.
- **Inline Styles & Svelte Classes**: Improved efficiency by eliminating unnecessary inline styles and Svelte classes.
![](/assets/images/anapnoe-ui-ux-flux.png)
## Features Overview
- **Mobile Responsive Design**: Optimal display and usability across various devices.
- **Versatile Micro-Template Engine**: Leverage for enhanced functionality through other extensions.
- **Customizable Theme Styles**: User-friendly interface for theme customization.
- **Styles Manager**: Versatile database-driven styles management.
- **Image Browser**: High-performance database-powered image navigation.
- **Civitai Images**: Ultra-fast virtualized browser for Civitai images.
- **Civitai Models**: Ultra-fast virtualized browser for Civitai models.
- **Built-in Console Log**: Debugging capabilities for developers.
- **Production and Development Modes**: Dynamically compile the web UI UX using Vite directly from the interface.
- **Ignore Overrides Option**: Flexibility to maintain original settings when necessary.
@@ -27,12 +24,68 @@ Please note that while this extension focuses solely on frontend optimizations,
- **Toggle Input Modes**: Switch between slider and numeric input modes for a compact interface.
- **Compatible with Gradio 3 and 4**: Works seamlessly with both Gradio 3 and Gradio 4 frameworks.
## Seamless UI Integration with Extensions
### Seamless UI Integration with Extensions
- **Infinite Image Browsing Extension**
- **Deforum Extension**
- **Prompt-All-In-One Extension**
- **Aspect-Ratio-Helper Extension**
## Optimizations
- **Redundant Checkpoints & Extra Networks**: Removed redundant Checkpoints and Extra Networks (Textual Inversion, LoRA, Hypernetworks) from txt2img/img2img tabs. → Implemented single-instance infinite scroll to progressively load optimized assets + metadata from SQLite DB.
- **Inline Event Listeners**: Eradicating inline event listeners from "Extra Networks" cards and action buttons.
- **Event Delegation Pattern**: Applying an event delegation pattern to further streamline the code by consolidating event handling for "Extra Networks" cards and action buttons.
- **Optimized Stylesheets**: Enhanced visual coherence by substituting all default Gradio stylesheets in the DOM with an optimized version.
- **Inline Styles & Svelte Classes**: Improved efficiency by eliminating unnecessary inline styles and Svelte classes.
- **Database-Powered**: SQLite implementation enables rapid indexing/searching across: Extra Networks, Image Browser and Styles Manager.
- **Virtualized Grid**: Dynamic virtualized grid with memory/DOM efficiency for: Checkpoints, Textual Inversions, LoRA, Hypernetworks, Image Browser, Styles Manager, Civitai Images & Models.
### Performance Comparison: UI vs UX
| Core Metrics | SD web UI | SD web UI UX | Δ (%) | Key Improvements |
|-----------------|-----------:|-------------:|-----------:|:-----------------|
| **JS Heap** | 96,945,380 | 55,048,600 | **-43.2%** | **Memory Efficiency**: 43% ↓ JS heap memory |
| **Documents** | 109 | 134 | **+22.9%** | **Resource Management**: Optimized overhead |
| **Nodes** | 53,895 | 41,542 | **-22.9%** | **DOM Efficiency**: 23% ↓ nodes despite 23% ↑ documents |
| **Listeners** | 8,195 | 4,178 | **-49.0%** | **Event Handling**: 49% ↓ listeners |
| **Visual Comparison** | |
|---|---|
| ![SD web UI](/assets/images/stable-diffusion-webui-insights.png) | ![SD web UI UX](/assets/images/stable-diffusion-webui-ux-insights.png) |
| *Automatic1111 - Stable Diffusion web UI* | *Anapnoe - Stable Diffusion web UI UX* |
### Performance Comparison: Forge vs UX Forge
| Core Metrics | SD web UI Forge | SD web UI UX Forge | Δ (%) | Key Improvements |
|-----------------|-----------------:|-------------------:|------------:|:-----------------|
| **JS Heap** | 56,121,196 | 45,049,884 | **-19.7%** | **Memory Efficiency**: 19% ↓ JS heap memory |
| **Documents** | 21 | 111 | **+428.6%** | **Resource Management**: Optimized overhead |
| **Nodes** | 46,943 | 43,651 | **-7.0%** | **DOM Efficiency**: 7% ↓ nodes despite 428% ↑ documents |
| **Listeners** | 10,562 | 7,495 | **-29.0%** | **Event Handling**: 29% ↓ listeners |
| **Visual Comparison** | |
|---|---|
| ![SD web UI Forge](/assets/images/stable-diffusion-webui-forge-insights.png) | ![SD web UI UX Forge](/assets/images/stable-diffusion-webui-ux-forge-insights.png) |
| *lllyasviel - Stable Diffusion web UI Forge* | *Anapnoe - Stable Diffusion web UI UX Forge* |
⚠️ *Baseline metrics reflect measurements with **all additional webui extensions disabled** - particularly relevant for SD Forge's extensive collection - to ensure balanced comparisons; enabling these extensions raises event listeners beyond 16,000 and introduces significant test-run performance variability.*
### 🚀 Scalable Event Handling & DOM Optimization
SD webUI UX implements **event delegation** + **virtualized grid** for O(1) performance scaling.
**Stable Diffusion web UI & web UI Forge Constraints**:
- **DOM Bloat**: Loads all assets → 10k LoRAs create 60k+ DOM nodes (10k images + 50k+ container elements)
- **Listener Overload**: ~5 listeners per asset → 50k+ listeners for 10K LoRAs
- **O(n) Scaling**: Linear performance degradation ***(Checkpoints, Textual Inversions, LoRAs, Hypernetworks)***
**Stable Diffusion web UI UX & web UI UX Forge optimized Architecture**:
- **Virtualized Grid**: Renders only visible assets (~15 items in default viewport)
- **Event Delegation**: Single listener handles all interactions
- **DOM Recycling**: Dynamic pool manages thumbnail elements
🎯 **Performance Outcome**:
- Flat memory profile (≈50MB heap regardless of model assets library size)
- O(1) event handling complexity
- Instant scrolling with 100K+ assets
## Installation
- **Open the Extensions tab in SD-webui.**
- **Select the Install from URL option.**
@@ -41,25 +94,28 @@ Please note that while this extension focuses solely on frontend optimizations,
- **Wait for the installation to complete and click on Apply and restart UI.**
## Todo
- Separate and organize CSS into individual files (in progress).
- Create documentation for developers on how to incorporate their components into various areas of the UI/UX.
- Implement fullscreen gallery functionality.
- Fork the Gradio project and contribute to enhancing their components.
- [ ] Separate and organize CSS into individual files (in progress).
- [ ] Create documentation for component integration into UI/UX.
- [ ] Automatically update the Image Browser's SQLite database when files added or removed.
- [ ] Improve Civitai Models download manager.
- [ ] Add virtualization for **Tree View** component.
- [ ] Develop framework-specific npm packages for the UI/UX Dynamic Virtualized Grid component, supporting React, Vue, Svelte, Solid, and Qwik.
## Advanced Theme Style Configurator (in progress)(upcoming feature)
A sophisticated theme editor allowing you to personalize any aspect of the UI-UX. Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
[🌟 Get early access to Advanced Theme Style Configurator! 🌟](https://buymeacoffee.com/dayanbayah)
![anapnoe-ui-ux-theme-editor-advanced](https://github.com/anapnoe/sd-webui-ux/blob/main/assets/images/anapnoe-ui-ux-theme-editor-advanced.png)
## Workspaces UI-UX (in progress)(upcoming extension)
## Workspaces UI-UX (in progress)(early access)
The workspaces extension empowers you to create customized views and organize them according to your unique preferences. With an intuitive drag-and-drop interface, you can design workflows that are perfectly tailored to your specific requirements, giving you ultimate control over your work environment.
[🌟 Get early access to Workspaces! 🌟](https://buymeacoffee.com/dayanbayah)
![anapnoe-ui-ux-workspaces](https://github.com/anapnoe/sd-webui-ux/blob/main/assets/images/anapnoe-ui-ux-workspaces.png)
![anapnoe-ui-ux-workspaces](/assets/images/anapnoe-ui-ux-workspaces.png)
## Advanced Theme Style Configurator (in progress)(upcoming)
A sophisticated theme editor allowing you to personalize any aspect of the UI-UX. Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
[🌟 Get early access to Advanced Theme Style Configurator! 🌟](https://buymeacoffee.com/dayanbayah)
![anapnoe-ui-ux-theme-editor-advanced](/assets/images/anapnoe-ui-ux-theme-editor-advanced.png)

136
extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css
View File

@@ -52,6 +52,7 @@
--ae-uiux_exnet_header_size: 14;
--ae-uiux_exnet_image_tint: 0;
--ae-uiux_min_wrap_size: 140;
--ae-uiux_exnet_aspect_ratio: calc(var(--ae-uiux_exnet_aspect_ratio_x) / var(--ae-uiux_exnet_aspect_ratio_y));
}
body {
@@ -342,6 +343,7 @@ body {
padding: var(--ae-input-padding);
margin: 0;
min-height: var(--ae-input-height);
}
.range-line,
@@ -353,6 +355,13 @@ body {
order: -1;
}
* select,
* input:not([type="range"]),
* textarea {
padding-left: calc(var(--ae-input-padding) + (var(--ae-border-radius) * 0.25)) !important;
padding-right: calc(var(--ae-input-padding) + (var(--ae-border-radius) * 0.25)) !important;
}
/* * .no-slider-layout .min-width,
* .no-slider-layout .flexbox,
* .no-slider-layout .gradio-slider{
@@ -869,6 +878,8 @@ label>span+div,
flex-direction: column;
height: auto;
white-space: normal;
padding-left: calc(var(--ae-border-radius) * 0.5);
padding-right: calc(var(--ae-border-radius) * 0.5);
}
.gradio-video .controls .inner {
@@ -1438,8 +1449,10 @@ li.item span {
.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);
@@ -1776,24 +1789,46 @@ div#layout-3 {
z-index: 1;
}
.sponsors_grid,
#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);
/*white-space: nowrap;*/
padding-right: var(--ae-panel-padding);
}
.sponsors_grid.current {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#contributors_grid{
overflow: auto;
}
.sponsors_grid a,
#contributors_grid a {
align-items: center;
padding: 10px;
position: relative;
flex-flow: wrap !important;
flex-direction: column !important;
height: 100%;
}
.sponsors_grid figure,
#contributors_grid figure {
margin: 0;
width: 60px;
height: 60px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: var(--ae-panel-bg-color);
}
.sponsors_grid.current figure{
width: 120px;
height: 120px;;
}
#contributors_grid img {
@@ -1801,6 +1836,34 @@ div#layout-3 {
border-radius: 50%;
}
.sponsors-coffee
{
position: absolute;
top: 0;
right: 0;
width: 25px;
line-height: 25px;
background-color: var(--ae-panel-bg-color);
display: flex;
justify-content: center;
margin: 5px;
border-radius: 50%;
color: var(--ae-label-color);
}
.sponsors-coffee::before{
content: 'x';
}
#contributors_tabitem_parent .lrp-32,
#sponsors_tabitem_parent .lrp-32
{
max-width: unset;
}
.sponsors_grid a {
pointer-events: none;
}
#flexbox-9 {
justify-content: flex-end;
}
@@ -2421,8 +2484,8 @@ button.gridjs-sort-neutral {
}
#template-settings .split-container:first-child,
.layout-extra-networks .split-container:first-child {
#split-settings-left,
.split-container.exnet-left {
min-width: 135px;
}
@@ -2669,11 +2732,10 @@ span.star_count b {
}
#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);
width: 120px;
order: -1;
margin: auto;
margin-right: 0;
}
@@ -2818,6 +2880,7 @@ div[data-testid="image"] canvas {
.group-row>* button,
.group-row>* {
border-radius: 0 !important;
min-width: fit-content;
}
.group-row>*:last-child button,
@@ -3967,4 +4030,55 @@ select,
.about-image-container:hover .about-image-fade:last-child {
opacity: 1;
}
.flex-width {
width: 0%;
flex-grow: 1;
flex-shrink: 1;
min-width: min(calc(var(--ae-uiux_min_wrap_size)* 1px), 100%);
}
.no-top-padding {
padding-top: 0;
}
.no-bottom-padding {
padding-bottom: 0;
}
table.non-editable-table {
display: block;
text-align: left;
}
table.non-editable-table td {
line-break: anywhere;
text-wrap: wrap;
min-width: 100px;
vertical-align: top;
}
.non-editable-div img.thumbnail-image {
max-height: 180px;
width: 100%;
height: auto;
object-fit: contain;
min-width: 120px;
display: block;
}
.non-editable-info {
justify-content: space-between !important;
}
/*
.ae-button .portal button {
pointer-events: none;
}
*/
.no-slider-layout .min-width,
.no-slider-layout .flexbox:not(.unset-min-width, .flex-start, .shrink),
.no-slider-layout .block {
min-width: min(100px, 100%) !important;
}

3741
extensions-builtin/sd-webui-ux/assets/css/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

116
extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css
View File

@@ -302,4 +302,118 @@ button.active .icon-sort {
.icon-gallery {
-webkit-mask-image: url(../svg/gallery-line.svg);
}
}
.icon-stylez {
-webkit-mask-image: url(../svg/quill-pen-ai-line.svg);
}
.icon-rebuild-thumbs {
-webkit-mask-image: url(../svg/image-circle-ai-line.svg);
}
.icon-civitai-images {
-webkit-mask-image: url(../svg/image-ai-line.svg);
}
.icon-civitai-models {
-webkit-mask-image: url(../svg/planet-line.svg);
}
.icon-create-new {
-webkit-mask-image: url(../svg/add-circle-line.svg);
}
.icon-full-screen{
-webkit-mask-image: url(../svg/fullscreen-line.svg);
}
.ae-virtual.fullscreen .icon-full-screen{
-webkit-mask-image: url(../svg/fullscreen-exit-line.svg);
}
.icon-grid-size{
-webkit-mask-image: url(../svg/focus-mode.svg);
}
.ae-virtual.full .icon-grid-size{
-webkit-mask-image: url(../svg/focus-mode.svg);
background-color: var(--ae-primary-color);
}
.icon-shut-down {
-webkit-mask-image: url(../svg/shut-down-line.svg);
}
.icon-refresh {
-webkit-mask-image: url(../svg/refresh-line.svg);
}
.icon-tile{
display: none;
}
.ae-virtual.full .icon-tile{
-webkit-mask-image: url(../svg/grid-line.svg);
display: block;
}
.ae-virtual.full.tileable .icon-tile{
-webkit-mask-image: url(../svg/grid-fill.svg);
}
.ae-virtual .icon-info{
display: none;
}
.ae-virtual.full .icon-info{
-webkit-mask-image: url(../svg/file-info-fill.svg);
display: block;
}
.ae-virtual.full.info .icon-info{
background-color: var(--ae-primary-color);
}
.ae-virtual .icon-delete{
-webkit-mask-image: url(../svg/delete-bin-2-fill.svg);
background-color: var(--ae-primary-color);
}
.ae-virtual .icon-send-params{
-webkit-mask-image: url(../svg/arrow-left-up-box-line.svg);
}
.ae-virtual .icon-link{
-webkit-mask-image: url(../svg/link.svg);
}
.send-button:has([class*="icon-2"])::before {
right: -1px;
top: -1px;
background-color: var(--ae-primary-color);
padding: 1px;
border-radius: 50%;
z-index: 1;
}
.send-button:has([class*="icon-2"])::before, .send-button:has([class*="icon-2"])::after {
content: "";
width: 11px;
height: 11px;
position: absolute;
}
.send-button:has([class*="icon-2"])::after {
right: 0px;
top: 0px;
background-color: var(--ae-input-hover-text-color);
-webkit-mask-image: url(../svg/arrow-up-line.svg);
z-index: 2;
}
.send-button{
position: relative;
padding: 0;
background-color: transparent;
border: 0;
line-height: 0;
}
button[class^="icon-"] {
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}

149
extensions-builtin/sd-webui-ux/assets/css/uiux-tree.css Normal file
View File

@@ -0,0 +1,149 @@
.tree-view .nested {
display: none;
}
.tree-view .active {
display: block;
}
.tree-view {
--spacing_x: 10px;
--spacing_y: 20px;
--radius: 8px;
--lw: 1px;
line-height: 20px;
font-size: 14px;
margin-left: 0px;
}
.tree-view li {
display: block;
position: relative;
padding-left: calc(2 * var(--spacing_x) - var(--radius) - var(--lw));
}
.tree-view ul {
margin-left: calc(var(--radius) - var(--spacing_x));
padding-left: 0;
}
.tree-view ul li {
border-left: var(--lw) solid var(--ae-main-bg-color);
}
.tree-view ul li.active {
background-color: var(--ae-main-bg-color);
}
.tree-view li.active summary.tree-file::before {
background-color: var(--ae-primary-color);
}
.tree-view ul li:last-child {
border-color: transparent;
}
.tree-view ul li::before {
content: '';
display: block;
position: absolute;
top: calc(var(--spacing_y) / -2 + var(--radius));
left: calc(var(--lw) * -1);
width: calc(var(--spacing_x) - var(--radius));
height: calc(var(--spacing_y) - var(--radius));
border: solid var(--ae-main-bg-color);
border-width: 0 0 var(--lw) var(--lw);
}
.tree-view summary{
padding-right: 70px;
display: block;
cursor: pointer;
margin-left: calc(var(--radius));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tree-view summary::marker,
.tree-view summary::-webkit-details-marker {
display: none;
}
.tree-view summary:focus {
outline: none;
}
.tree-view summary:focus-visible {
outline: var(--lw) dotted var(--ae-primary-color);
}
.tree-view summary.tree-file::before,
.tree-view summary::before {
content: '';
display: block;
position: absolute;
top: calc(var(--spacing_y) / 2 - var(--radius));
left: calc(var(--spacing_x) - var(--radius) - var(--lw));
width: calc(2 * var(--radius));
height: calc(2 * var(--radius));
border-radius: 50%;
background-color: var(--ae-primary-color);
}
/*
.tree-view summary.tree-file {
margin-left: calc(var(--spacing_x)* -1 + var(--radius)* 2);
}
*/
.tree-view summary.tree-folder {
color: var(--ae-primary-color);
}
.tree-view summary.tree-file::before {
top: calc(var(--spacing_y) / 2 - var(--radius) * 0.5);
left: calc(var(--spacing_x) - var(--radius) * 0.5 - var(--lw));
width: calc(2 * var(--radius) * 0.5);
height: calc(2 * var(--radius) *0.5);
background-color: var(--ae-main-bg-color);
/*
-webkit-mask-image: url(../svg/file-info-line.svg);
*/
}
.tree-view ul li.li-file::before {
width: calc(var(--spacing_x) - var(--radius)* 0.5);
}
.tree-view .caret.tree-folder::before {
-webkit-mask-image: url(../svg/add-circle-fill.svg);
}
.tree-view .caret-down.tree-folder::before {
-webkit-mask-image: url(../svg/indeterminate-circle-fill.svg);
}
.tree-view li > .item-actions {
position: absolute;
right: 0;
top: 0;
transform-origin: top right;
transform: scale(0.8);
padding: 0;
}
.tree-view ul > li:hover > .item-actions {
display: flex;
}
.tree-view ul > li:hover > summary {
width: calc(100% - 60px);
}
.tree-view ul:hover > li[data-name]:hover {
background-color: var(--ae-main-bg-color);
}

644
extensions-builtin/sd-webui-ux/assets/css/uiux-virtual.css Normal file
View File

@@ -0,0 +1,644 @@
.ae-virtual {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
overflow : auto;
/*touch-action: none;*/
contain: strict;
}
.ae-virtual-detail .item,
.ae-virtual .item {
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);*/
aspect-ratio: var(--ae-uiux_exnet_aspect_ratio_x) / var(--ae-uiux_exnet_aspect_ratio_y);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
user-select:none;
justify-content: flex-end;
/*isolation: isolate;*/
}
.ae-virtual.vertical .item {
height: auto;
width: 100%;
}
.ae-virtual.horizontal .item {
height: 100%;
width: auto;
/*min-width: calc(var(--ae-uiux_exnet_fit_size) * var(--ae-uiux_exnet_aspect_ratio) * 1px);*/
}
.overflow-hidden {
overflow: hidden;
}
.ae-virtual .sentinel {
position: absolute;
/*background-color: #ff4f4f;*/
top: 0px;
left: 0px;
will-change: transform;
transform-style: preserve-3d; /* Better GPU utilization */
backface-visibility: hidden; /* Prevents invisible redraws */
}
.ae-virtual.vertical .sentinel {
height: 1px;
width: 100%;
}
.ae-virtual.horizontal .sentinel {
width: 1px;
height: 100%;
}
.ae-virtual > .ae-virtual-wrapper{
position: relative;
display: grid;
gap: var(--ae-gap-size);
/*touch-action: none;*/
will-change: transform;
transform-style: preserve-3d; /* Better GPU utilization */
backface-visibility: hidden; /* Prevents invisible redraws */
}
.ae-virtual.vertical > .ae-virtual-wrapper {
grid-auto-flow: row;
width: 100%;
grid-auto-rows: minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), auto);
grid-template-columns: repeat(auto-fit, minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), 1fr));
/*grid-template-columns: repeat(auto-fill, minmax(0, 1fr));*/
/*grid-template-rows: repeat(auto-fill, minmax(0, 1fr));*/
}
.ae-virtual.horizontal > .ae-virtual-wrapper {
grid-auto-flow: column;
height: 100%;
/* width: fit-content; */
/*grid-auto-columns: minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), auto);*/
grid-auto-columns: min-content;
grid-template-rows: repeat(auto-fill, minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), 1fr));
}
.ae-virtual.full {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.ae-virtual.full > .ae-virtual-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
gap: 0;
}
.ae-virtual.full .item {
height: 100%;
width: 100%;
background-size: contain;
}
.ae-virtual.horizontal.full > .ae-virtual-wrapper {
flex-direction: column;
}
.item-img {
width: 100%;
height: 100%;
}
.item-img {
position: absolute;
top: 0;
width: 100%;
height: calc(100% - 5px);
transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1);
contain: layout size;
will-change: transform;
touch-action: pan-x pan-y;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.ae-virtual.full .item-img {
background-size: contain;
touch-action: none;
}
.ae-virtual.full.tileable .item-img {
background-repeat: repeat;
background-size: 33vh;
}
.ae-virtual-detail,
.loading-indicator {
position: absolute;
text-align: center;
background: rgba(0, 0, 0, 0.75);
display: flex;
flex-direction: column;
line-height: 20px;
justify-content: center;
inset: 0;
}
.ae-virtual-detail {
background-color: var(--ae-main-bg-color);
justify-content: flex-start;
}
.ae-virtual-detail-content>.ae-virtual-wrapper {
grid-auto-rows: minmax(250px, auto);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ae-virtual {
font-size: calc(var(--ae-uiux_exnet_header_size)* 1px);
}
.ae-virtual-wrapper .title {
position: absolute;
bottom: 0;
padding: 5px;
background-color: var(--ae-main-bg-color);
font-weight: 600;
left: 0;
right: 0;
overflow-wrap: anywhere;
/* text-transform: uppercase; */
display: block;
color: var(--ae-label-color);
text-align: center;
}
.ae-virtual .item-info {
/*
position: absolute;
bottom: 0;
padding: 5px;
background-color: var(--ae-main-bg-color);
font-weight: 600;
left: 0;
right: 0;
overflow-wrap: anywhere;
display: block;
color: var(--ae-label-color);
text-align: center;
*/
}
.ae-virtual .item-info-description {
display: none;;
}
.ae-virtual.full .item-info {
text-align: left;
display: none;;
overflow: hidden;
}
.ae-virtual.full.info .item-info-description,
.ae-virtual.full.info .item-info {
display: flex;
font-weight: normal;
flex-direction: column;
}
.ae-virtual-wrapper .active .title {
background-color: var(--ae-primary-color);
}
.ae-virtual-wrapper .item.active {
border: 2px solid var(--ae-primary-color);
}
option {
background-color: var(--ae-main-bg-color);
}
select:focus option:hover,
option:checked {
background-color: var(--ae-primary-color);
color: var(--ae-main-bg-color);
}
.additional,
.additional ul {
position: relative;
z-index: 99;
}
.card:hover .additional,
.card:hover .additional ul {
display: flex !important;
}
*.extra-network-cards .card ul {
gap: 2px;
}
*.extra-network-cards .card ul .card-button {
width: 20px;
height: 20px;
font-size: 15px !important;
background: transparent;
}
.ae-virtual-detail-content {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
overflow-y: auto;
inset: 0;
}
.ae-virtual-detail>.close {
position: absolute;
z-index: 999;
right: 15px;
top: 5px;
}
.ae-virtual-detail:has(> .ae-virtual-detail-content > *) {
display: flex;
}
.ae-virtual-detail:not(:has(> .ae-virtual-detail-content > *)) {
display: none;
}
.ae-virtual-detail-content>.ae-virtual-wrapper {
/*
display: flex;
flex-direction: column;
flex-grow: 1;*/
}
.ae-virtual-detail-content>.ae-virtual-wrapper>* {
/*
flex: 1 0 100%;
width: 100%;
height: 100%;
box-sizing: border-box;
*/
}
span.extra-type {
background-color: var(--ae-main-bg-color);
padding: 3px;
margin: 2px;
position: absolute;
border-radius: var(--ae-border-radius);
}
.item-actions, .item-actions-top {
display: none;
justify-content: flex-end;
padding: 5px;
}
.item.card:hover .item-actions,
.item.card:hover .item-actions-top
{
display: flex;
}
.item-actions-top>*,
.item-actions>* {
width: 24px;
height: 24px;
min-width: unset;
min-height: unset;
background: var(--ae-input-text-color);
}
.item-send-actions {
/*
position: absolute;
top: 40px;
background: transparent;
margin-top: -1px;
gap: 3px;
display: flex;
flex-wrap: wrap;
height: auto;
width: auto;
flex-direction: column;
*/
}
.ae-virtual .item {
display: flex;
flex-direction: column;
}
.ae-virtual .item-info {
position: relative;
padding: 5px;
background-color: var(--ae-main-bg-color);
font-weight: 600;
overflow-wrap: anywhere;
display: block;
color: var(--ae-label-color);
text-align: center;
}
.item-actions, .item-actions-top {
background: transparent;
margin-top: -1px;
gap: 3px;
display: flex;
flex-direction: row;
/*justify-content: center;*/
}
.item-actions-row {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
z-index: 1;
background-color: transparent;
}
.ae-virtual.full .item-actions-row {
flex-direction: row;
}
.ae-virtual .item-spacer {
flex-grow: 1;
background-color: transparent;
}
.ae-virtual.full .item-spacer {
display:none;
}
.ae-virtual.full .item-actions-top {
position: initial;
width: auto;
flex-direction: row;
flex-grow: 1;
padding-right: 0;
}
.ae-virtual:not(.full) .item.card:hover .item-img{
filter: brightness(0.5);
}
.ae-virtual:not(.full) .item.card .item-actions-row{
display: none;
}
.ae-virtual:not(.full) .item.card:hover .item-actions-row{
display: flex;
}
/* metadata preview */
.card.standalone-card-preview img {
width: 100%;
}
[id$="edit_user_metadata"] {
gap: var(--ae-gap-size);
text-align: left;
padding: 5px;
}
.ae-virtual {
opacity: 0;
transition: opacity 0s;
/*transition: opacity 1.0s ease-in; */
}
.ae-virtual.visible {
opacity: 1;
}
.item-info > button {
background-color: transparent;
border: 0;
padding: 0;
min-height: unset;
font-size: calc(var(--ae-uiux_exnet_header_size)* 1px);
}
.item-info > button:hover {
color:var(--ae-primary-color)
}
.ae-virtual span.extra-type {
background-color: var(--ae-main-bg-color);
padding: 3px;
margin: 2px;
position: absolute;
border-radius: var(--ae-border-radius);
z-index: 1;
top: 0;
font-size: 85%;
}
.ae-virtual.full .item-info {
max-height: 50%;
overflow: hidden;
}
.ae-virtual.full .item-info-description {
height: 100%;
overflow-y: auto;
}
.ae-virtual.full .item-info > * ,
.ae-virtual.full .item-info-description > * {
margin: 0;
margin-bottom: 10px;
font-size: 14px;
line-height: 16px;
display: block;
white-space: pre-wrap;
word-wrap: break-word;
}
.ae-virtual.full .item-info-description a {
margin: 0;
font-size: 12px;
line-height: 19px;
}
.ae-virtual.full .item-info-description img {
width: 100%;
}
.ae-virtual.full .item-info-title {
font-size: 16px;
line-height: 22px;
font-weight: 600;
display: block;
width: fit-content;
}
#civitai_models_tabitem .ae-virtual-detail>.close {
display: none;
}
#civitai_models_tabitem .item-actions-row {
justify-content: flex-end;
}
.ae-virtual.full .item-img {
position: relative;
}
.model-sdownload{
display: inline-block !important;
line-height: var(--ae-input-height) !important;
}
.ae-virtual .item {
background-color : rgb(255 255 255 / 0%);
}
.ae-virtual:not(.full) .card:before {
content: "";
position: absolute;
inset: 0;
background: var(--ae-secondary-color);
}
/* Hover effects */
/*
.layout-extra-networks .ae-virtual:not(.full) .item-img {
animation: addEffect 0.3s forwards;
}
.layout-extra-networks .ae-virtual:not(.full) .card:before {
animation: addBgEffect 0.3s forwards;
}
.layout-extra-networks:hover .ae-virtual:not(.full) .item-img {
animation: removeEffect 0.3s forwards;
}
.layout-extra-networks:hover .ae-virtual:not(.full) .card:before {
animation: removeBgEffect 0.3s forwards;
}
.layout-extra-networks.mouseenter:hover .ae-virtual:not(.full) .item-img,
.layout-extra-networks.mouseenter .ae-virtual:not(.full) .item-img {
filter: none !important;
mix-blend-mode: normal !important;
animation: none !important;
}
.layout-extra-networks.mouseenter:hover .ae-virtual:not(.full) .card:before,
.layout-extra-networks.mouseenter .ae-virtual:not(.full) .card:before {
opacity: 0 !important;
}
.layout-extra-networks.init-view .ae-virtual:not(.full) .item-img {
filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10)) !important;
mix-blend-mode: multiply !important;
animation: none !important;
}
.layout-extra-networks.init-view .ae-virtual:not(.full) .card:before {
opacity: var(--ae-uiux_exnet_image_tint) !important;
animation: none !important;
}
.default-mobile .layout-extra-networks .ae-virtual:not(.full) .item-img,
.default-mobile .layout-extra-networks.init-view .ae-virtual:not(.full) .item-img {
filter: none !important;
mix-blend-mode: normal !important;
animation: none !important;
}
.default-mobile .layout-extra-networks .ae-virtual:not(.full) .card:before,
.default-mobile .layout-extra-networks.init-view .ae-virtual:not(.full) .card:before {
opacity: 0 !important;
}
*/
.layout-extra-networks .ae-virtual:not(.full) .item-img {
filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10)) !important;
mix-blend-mode: multiply !important;
animation: none !important;
}
.layout-extra-networks .ae-virtual:not(.full) .card:before {
opacity: var(--ae-uiux_exnet_image_tint) !important;
animation: none !important;
}
.layout-extra-networks:hover .ae-virtual:not(.full) .item-img {
filter: none !important;
mix-blend-mode: normal !important;
animation: none !important;
}
.layout-extra-networks:hover .ae-virtual:not(.full) .card:before {
opacity: 0 !important;
animation: none !important;
}
.layout-extra-networks:hover .ae-virtual:not(.full) .item:hover .item-img{
filter: brightness(0.25) !important;
}
@keyframes removeEffect {
0% {
filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10));
mix-blend-mode: multiply;
}
99% {
filter: grayscale(0);
mix-blend-mode: multiply;
}
100% {
filter: none;
mix-blend-mode: normal;
}
}
@keyframes addEffect {
0% {
filter: none;
mix-blend-mode: normal;
}
1% {
filter: grayscale(0);
mix-blend-mode: multiply;
}
100% {
filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10));
mix-blend-mode: multiply;
}
}
@keyframes removeBgEffect{
0% {
opacity: var(--ae-uiux_exnet_image_tint);
}
100% {
opacity: 0;
}
}
@keyframes addBgEffect{
0% {
opacity: 0;
}
100% {
opacity: var(--ae-uiux_exnet_image_tint);
}
}

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-flux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-new-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-forge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 KiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover-m.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 939 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01-hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 KiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-forge-insights.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-insights.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-forge-insights.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-insights.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

1
extensions-builtin/sd-webui-ux/assets/img/arrow.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

1
extensions-builtin/sd-webui-ux/assets/img/autofit.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg height="96px" viewBox="0 0 96 96" width="96px" xmlns="http://www.w3.org/2000/svg"><path transform="rotate(90 50 50)" fill="#fff" d="M71.311,80C69.67,84.66,65.23,88,60,88H20c-6.63,0-12-5.37-12-12V36c0-5.23,3.34-9.67,8-11.311V76c0,2.21,1.79,4,4,4H71.311 z"/><path transform="rotate(90 50 50)" fill="#fff" d="M76,8H36c-6.63,0-12,5.37-12,12v40c0,6.63,5.37,12,12,12h40c6.63,0,12-5.37,12-12V20C88,13.37,82.63,8,76,8z M80,60 c0,2.21-1.79,4-4,4H36c-2.21,0-4-1.79-4-4V20c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4V60z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

1
extensions-builtin/sd-webui-ux/assets/img/close.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="2 2 20 20" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
extensions-builtin/sd-webui-ux/assets/img/download.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" ?><svg height="141.732px" version="1.1" viewBox="0 0 141.732 141.732" width="141.732px" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M120.674,125.138H20.793v16.594h99.881V125.138z M119.019,58.776c-2.561-2.562-6.716-2.562-9.275,0L77.21,91.312V6.562 C77.21,2.936,74.269,0,70.648,0c-3.624,0-6.56,2.937-6.56,6.563v84.75L31.992,59.218c-2.562-2.564-6.715-2.564-9.277,0 c-2.565,2.562-2.565,6.716,0,9.279l43.294,43.293c0.15,0.154,0.314,0.299,0.481,0.438c0.076,0.062,0.155,0.113,0.234,0.176 c0.094,0.065,0.186,0.142,0.279,0.206c0.097,0.063,0.192,0.114,0.286,0.174c0.088,0.054,0.174,0.105,0.265,0.153 c0.1,0.056,0.199,0.1,0.298,0.147c0.097,0.045,0.19,0.091,0.283,0.132c0.098,0.04,0.196,0.072,0.295,0.105 c0.104,0.038,0.207,0.078,0.312,0.109c0.101,0.03,0.197,0.052,0.297,0.077c0.108,0.023,0.214,0.058,0.324,0.078 c0.115,0.021,0.231,0.033,0.346,0.054c0.097,0.015,0.192,0.032,0.289,0.042c0.43,0.042,0.865,0.042,1.295,0 c0.1-0.01,0.191-0.027,0.289-0.042c0.114-0.021,0.233-0.029,0.344-0.054c0.109-0.021,0.217-0.055,0.324-0.078 c0.102-0.025,0.199-0.047,0.299-0.077c0.105-0.031,0.207-0.071,0.312-0.109c0.102-0.03,0.195-0.062,0.295-0.105 c0.096-0.041,0.191-0.087,0.283-0.132c0.1-0.048,0.199-0.092,0.297-0.147c0.091-0.048,0.177-0.104,0.264-0.153 c0.098-0.06,0.193-0.11,0.287-0.174c0.096-0.064,0.189-0.141,0.281-0.206c0.076-0.062,0.156-0.113,0.233-0.176 c0.249-0.204,0.479-0.437,0.694-0.67c0.076-0.067,0.154-0.131,0.229-0.203l43.294-43.296 C121.581,65.491,121.581,61.337,119.019,58.776"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
extensions-builtin/sd-webui-ux/assets/img/error.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M16,1A15,15,0,1,0,31,16,15,15,0,0,0,16,1Zm0,2a13,13,0,0,1,8.45,3.14L6.14,24.45A13,13,0,0,1,16,3Zm0,26a13,13,0,0,1-8.45-3.14L25.86,7.55A13,13,0,0,1,16,29Z" id="ban_sign_crossed_circle"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

1
extensions-builtin/sd-webui-ux/assets/img/heart-outline.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="512px" viewBox="0 0 512 512" width="512px" xmlns="http://www.w3.org/2000/svg"><path stroke="#fff" stroke-width="30" fill="#fff" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,254.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4 M340.8,83C307,83,276,98.8,256,124.8 c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6L245.1,418l10.9,11l10.9-11l148.3-149.8 c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 580 B

1
extensions-builtin/sd-webui-ux/assets/img/heart.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="512px" height="512px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M340.8,83C307,83,276,98.8,256,124.8c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6 L245.1,418l10.9,11l10.9-11l148.3-149.8c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

8
extensions-builtin/sd-webui-ux/assets/img/info.svg Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
<circle cx="12" cy="12" r="9.6" style="fill:none;stroke:white;stroke-width:1.92px;"/>
<g transform="matrix(20,0,0,20,8.26385,19.3395)">
<path d="M0.288,-0.659C0.288,-0.633 0.279,-0.612 0.261,-0.594C0.244,-0.577 0.223,-0.569 0.198,-0.569C0.174,-0.569 0.152,-0.578 0.135,-0.595C0.117,-0.613 0.108,-0.634 0.108,-0.659C0.108,-0.684 0.117,-0.705 0.135,-0.722C0.152,-0.74 0.174,-0.749 0.198,-0.749C0.223,-0.749 0.244,-0.74 0.261,-0.722C0.279,-0.705 0.288,-0.684 0.288,-0.659ZM0.354,-0.118L0.354,-0L0.037,-0L0.037,-0.118L0.115,-0.118L0.115,-0.393L0.037,-0.393L0.037,-0.513L0.278,-0.513L0.278,-0.118L0.354,-0.118Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
extensions-builtin/sd-webui-ux/assets/img/maximize.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="-1 -1 26 26" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

1
extensions-builtin/sd-webui-ux/assets/img/minimize.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

1
extensions-builtin/sd-webui-ux/assets/img/pause.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="-0.5 -0.5 25 25" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="10" x2="10" y1="15" y2="9"/><line x1="14" x2="14" y1="15" y2="9"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

BIN
extensions-builtin/sd-webui-ux/assets/img/pixel.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 B

1
extensions-builtin/sd-webui-ux/assets/img/play.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="-0.5 -0.5 25 25" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><polygon fill="#fff" points="10 8 16 12 10 16 10 8"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 291 B

1
extensions-builtin/sd-webui-ux/assets/img/preloader.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2" stroke-opacity=".65"><circle stroke-opacity=".15" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 435 B

1
extensions-builtin/sd-webui-ux/assets/img/theme.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg height="24px" version="1.2" viewBox="2 2 20 20" width="24px" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M12,4c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8S16.418,4,12,4z M12,18c-3.314,0-6-2.686-6-6s2.686-6,6-6s6,2.686,6,6 S15.314,18,12,18z"/><path d="M12,7v10c2.757,0,5-2.243,5-5S14.757,7,12,7z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 349 B

1
extensions-builtin/sd-webui-ux/assets/img/zoom-in.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

1
extensions-builtin/sd-webui-ux/assets/img/zoom-out.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

1
extensions-builtin/sd-webui-ux/assets/svg/add-circle-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11H7V13H11V17H13V13H17V11H13V7H11V11Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

1
extensions-builtin/sd-webui-ux/assets/svg/add-circle-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

1
extensions-builtin/sd-webui-ux/assets/svg/add-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 145 B

1
extensions-builtin/sd-webui-ux/assets/svg/arrow-left-up-box-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3ZM5 19V5H19V19H5ZM8 8V16H10V11.4142L15.2929 16.7071L16.7071 15.2929L11.4142 10H16V8H8Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

1
extensions-builtin/sd-webui-ux/assets/svg/arrow-right-up-box-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3ZM5 19V5H19V19H5ZM16 8V16H14V11.4142L8.70711 16.7071L7.29289 15.2929L12.5858 10H8V8H16Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

1
extensions-builtin/sd-webui-ux/assets/svg/book-shelf-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H14C14.5523 21 15 20.5523 15 20V15.2973L15.9995 19.9996C16.1143 20.5398 16.6454 20.8847 17.1856 20.7699L21.0982 19.9382C21.6384 19.8234 21.9832 19.2924 21.8684 18.7522L18.9576 5.0581C18.8428 4.51788 18.3118 4.17304 17.7716 4.28786L14.9927 4.87853C14.9328 4.38353 14.5112 4 14 4H10C10 3.44772 9.55228 3 9 3H4ZM10 6H13V14H10V6ZM10 19V16H13V19H10ZM8 5V15H5V5H8ZM8 17V19H5V17H8ZM17.3321 16.6496L19.2884 16.2338L19.7042 18.1898L17.7479 18.6057L17.3321 16.6496ZM16.9163 14.6933L15.253 6.86789L17.2092 6.45207L18.8726 14.2775L16.9163 14.6933Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

1
extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM7 11V13H17V11H7Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 240 B

2
extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-line.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5zm2 6h10v2H7v-2z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM7 11H17V13H7V11Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 239 B

After

Width:  |  Height:  |  Size: 255 B

1
extensions-builtin/sd-webui-ux/assets/svg/delete-bin-2-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7ZM13.4142 13.9997L15.182 12.232L13.7678 10.8178L12 12.5855L10.2322 10.8178L8.81802 12.232L10.5858 13.9997L8.81802 15.7675L10.2322 17.1817L12 15.4139L13.7678 17.1817L15.182 15.7675L13.4142 13.9997ZM9 4V6H15V4H9Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

7
extensions-builtin/sd-webui-ux/assets/svg/expand-collapse.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20">
<g fill="#fff">
<path d="m5 9h4v-4h2v4h4v2h-4v4h-2v-4h-4z"/>
<path d="m25 9h10v2h-10z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 199 B

1
extensions-builtin/sd-webui-ux/assets/svg/file-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 3.5L4.5 9H10V3.5Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

1
extensions-builtin/sd-webui-ux/assets/svg/file-search-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2L21 7V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918C3 2.44405 3.44495 2 3.9934 2H16ZM13.529 14.4464L15.7395 16.6569L17.1537 15.2426L14.9432 13.0322C15.8492 11.4983 15.6432 9.48951 14.3252 8.17157C12.7631 6.60948 10.2305 6.60948 8.66839 8.17157C7.1063 9.73367 7.1063 12.2663 8.66839 13.8284C9.98633 15.1464 11.9951 15.3524 13.529 14.4464ZM12.911 12.4142C12.13 13.1953 10.8637 13.1953 10.0826 12.4142C9.30156 11.6332 9.30156 10.3668 10.0826 9.58579C10.8637 8.80474 12.13 8.80474 12.911 9.58579C13.6921 10.3668 13.6921 11.6332 12.911 12.4142Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 687 B

1
extensions-builtin/sd-webui-ux/assets/svg/focus-mode.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3C3.44772 3 3 3.44772 3 4V8H5V5H8V3H4ZM20 3H16V5H19V8H21V4C21 3.44772 20.5523 3 20 3ZM5 16V19H8V21H4C3.44772 21 3 20.5523 3 20V16H5ZM19 16V19H16V21H20C20.5523 21 21 20.5523 21 20V16H19ZM10 9C9.44772 9 9 9.44772 9 10V14C9 14.5523 9.44772 15 10 15H14C14.5523 15 15 14.5523 15 14V10C15 9.44772 14.5523 9 14 9H10Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 416 B

1
extensions-builtin/sd-webui-ux/assets/svg/folder-add-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5ZM11 12H8V14H11V17H13V14H16V12H13V9H11V12Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 288 B

1
extensions-builtin/sd-webui-ux/assets/svg/folder-add-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5ZM4 5V19H20V7H11.5858L9.58579 5H4ZM11 12V9H13V12H16V14H13V17H11V14H8V12H11Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

1
extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5ZM8 12V14H16V12H8Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

1
extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5ZM4 5V19H20V7H11.5858L9.58579 5H4ZM8 12H16V14H8V12Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 297 B

1
extensions-builtin/sd-webui-ux/assets/svg/gallery-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.409 19C16.633 16.6012 15.1323 15.1147 13.1434 13.3979C15.0238 11.8971 17.4071 11 20 11V3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H6V1H8V5H4V12C9.22015 12 13.6618 14.4616 15.3127 19H17.409ZM18 1V5H10V3H16V1H18ZM16.5 10C15.6716 10 15 9.32843 15 8.5C15 7.67157 15.6716 7 16.5 7C17.3284 7 18 7.67157 18 8.5C18 9.32843 17.3284 10 16.5 10Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 553 B

1
extensions-builtin/sd-webui-ux/assets/svg/gallery-view-2.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3C2.44772 3 2 3.44772 2 4V10C2 10.5523 2.44772 11 3 11H10C10.5523 11 11 10.5523 11 10V4C11 3.44772 10.5523 3 10 3H3ZM4 9V5H9V9H4ZM3 13C2.44772 13 2 13.4477 2 14V20C2 20.5523 2.44772 21 3 21H10C10.5523 21 11 20.5523 11 20V14C11 13.4477 10.5523 13 10 13H3ZM4 19V15H9V19H4ZM13 4C13 3.44772 13.4477 3 14 3H21C21.5523 3 22 3.44772 22 4V10C22 10.5523 21.5523 11 21 11H14C13.4477 11 13 10.5523 13 10V4ZM15 5V9H20V5H15ZM14 13C13.4477 13 13 13.4477 13 14V20C13 20.5523 13.4477 21 14 21H21C21.5523 21 22 20.5523 22 20V14C22 13.4477 21.5523 13 21 13H14ZM15 19V15H20V19H15Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 668 B

1
extensions-builtin/sd-webui-ux/assets/svg/gallery-view.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM6 7H11V11H6V7ZM11 13H6V17H11V13ZM13 7H18V11H13V7ZM18 13H13V17H18V13Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

1
extensions-builtin/sd-webui-ux/assets/svg/image-ai-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM2.9918 3H14V5H4V19L14 9L20 15V11H22V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 938 B

1
extensions-builtin/sd-webui-ux/assets/svg/image-circle-ai-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.4668 8.69379L20.7134 8.12811C21.1529 7.11947 21.9445 6.31641 22.9323 5.87708L23.6919 5.53922C24.1027 5.35653 24.1027 4.75881 23.6919 4.57612L22.9748 4.25714C21.9616 3.80651 21.1558 2.97373 20.7238 1.93083L20.4706 1.31953C20.2942 0.893489 19.7058 0.893489 19.5293 1.31953L19.2761 1.93083C18.8442 2.97373 18.0384 3.80651 17.0252 4.25714L16.308 4.57612C15.8973 4.75881 15.8973 5.35653 16.308 5.53922L17.0677 5.87708C18.0555 6.31641 18.8471 7.11947 19.2866 8.12811L19.5331 8.69379C19.7136 9.10792 20.2864 9.10792 20.4668 8.69379ZM12 4C7.58172 4 4 7.58172 4 12C4 14.4636 5.11358 16.6671 6.86484 18.1346L14.2925 10.707C14.683 10.3164 15.3162 10.3164 15.7067 10.707L19.5761 14.5764C19.5773 14.5729 19.5785 14.5693 19.5797 14.5658C19.8522 13.7604 20 12.8975 20 12C20 11.6765 19.9809 11.3579 19.9437 11.0452L21.9298 10.8094C21.9762 11.2002 22 11.5975 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.8614 2 13.6987 2.10914 14.4983 2.31487L14 4.25179C13.3618 4.0876 12.6919 4 12 4ZM10.813 19.9125C11.2 19.9701 11.5962 19.9998 11.9996 19.9998C14.7613 19.9998 17.1992 18.6003 18.6379 16.4666L14.9996 12.8283L8.58927 19.2386L8.59334 19.2405C9.28476 19.5664 10.0304 19.7961 10.813 19.9125ZM11 10C11 11.1046 10.1046 12 9 12C7.89543 12 7 11.1046 7 10C7 8.89543 7.89543 8 9 8C10.1046 8 11 8.89543 11 10Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM7 11V13H17V11H7Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 234 B

1
extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM7 11H17V13H7V11Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 347 B

1
extensions-builtin/sd-webui-ux/assets/svg/link.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B

2
extensions-builtin/sd-webui-ux/assets/svg/markup-line.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 10.4966L11.0385 6.86192C11.1902 6.33088 11.7437 6.02339 12.2747 6.17511C12.6069 6.27003 12.8666 6.52971 12.9615 6.86192L14 10.4966V11.9966H14.7192C15.1781 11.9966 15.5781 12.3089 15.6894 12.754L17.051 18.2007C18.8507 16.7338 20 14.4994 20 11.9966C20 7.5783 16.4183 3.99658 12 3.99658C7.58172 3.99658 4 7.5783 4 11.9966C4 14.4994 5.14932 16.7338 6.94897 18.2007L8.31063 12.754C8.42193 12.3089 8.82191 11.9966 9.28078 11.9966H10V10.4966ZM12 19.9966C12.2415 19.9966 12.4813 19.9859 12.7189 19.9648C13.6187 19.8846 14.4756 19.6555 15.2649 19.3022L13.9384 13.9966H10.0616L8.73514 19.3022C9.52438 19.6555 10.3813 19.8846 11.2811 19.9647C11.5187 19.9859 11.7585 19.9966 12 19.9966ZM12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C17.5228 1.99658 22 6.47373 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966Z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 10.4967L11.0385 6.86202C11.1902 6.33099 11.7437 6.0235 12.2747 6.17522C12.6069 6.27014 12.8666 6.52981 12.9615 6.86202L14 10.4967V11.9967H14.7192C15.1781 11.9967 15.5781 12.309 15.6894 12.7542L17.051 18.2008C18.8507 16.7339 20 14.4995 20 11.9967C20 7.57841 16.4183 3.99669 12 3.99669C7.58172 3.99669 4 7.57841 4 11.9967C4 14.4995 5.14932 16.7339 6.94897 18.2008L8.31063 12.7542C8.42193 12.309 8.82191 11.9967 9.28078 11.9967H10V10.4967ZM12 19.9967C12.2415 19.9967 12.4813 19.986 12.7189 19.9649C13.6187 19.8847 14.4756 19.6556 15.2649 19.3023L13.9384 13.9967H10.0616L8.73514 19.3023C9.52438 19.6556 10.3813 19.8847 11.2811 19.9648C11.5187 19.986 11.7585 19.9967 12 19.9967ZM12 21.9967C6.47715 21.9967 2 17.5195 2 11.9967C2 6.47384 6.47715 1.99669 12 1.99669C17.5228 1.99669 22 6.47384 22 11.9967C22 17.5195 17.5228 21.9967 12 21.9967Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 923 B

After

Width:  |  Height:  |  Size: 942 B

2
extensions-builtin/sd-webui-ux/assets/svg/planet-line.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.91762 8.0366C3.32984 9.23328 3 10.5792 3 11.9999C3 16.9704 7.02944 20.9999 12 20.9999C13.4216 20.9999 14.7684 20.6696 15.9657 20.081C16.8385 20.4544 17.6848 20.6991 18.4564 20.762C19.3582 20.8356 20.3 20.6665 20.9818 19.9847C21.7339 19.2325 21.8625 18.1689 21.7279 17.1727C21.6052 16.2638 21.2481 15.2537 20.726 14.2114C20.9051 13.503 21 12.7619 21 11.9999C21 7.02929 16.9706 2.99986 12 2.99986C11.2389 2.99986 10.4987 3.09454 9.79103 3.27318C8.7474 2.7498 7.73605 2.39172 6.8261 2.26834C5.82897 2.13315 4.76406 2.26128 4.01121 3.01413C3.3287 3.69664 3.16001 4.63956 3.2341 5.54233C3.29752 6.315 3.54313 7.16247 3.91762 8.0366ZM5.3224 5.96574C5.2734 5.75321 5.24204 5.55715 5.2274 5.37873C5.17928 4.79243 5.31727 4.53649 5.42543 4.42834C5.54452 4.30925 5.84797 4.15403 6.55739 4.25021C6.75482 4.27698 6.96951 4.32189 7.2 4.38547C6.50364 4.82527 5.87203 5.35784 5.3224 5.96574ZM19.6124 16.803C19.6751 17.0316 19.7195 17.2445 19.7459 17.4404C19.8416 18.1485 19.6865 18.4515 19.5676 18.5705C19.4595 18.6785 19.204 18.8163 18.6189 18.7686C18.4419 18.7542 18.2475 18.7233 18.0368 18.675C18.6427 18.1268 19.1736 17.4971 19.6124 16.803ZM15.8812 17.8264C14.2046 16.9482 12.2571 15.5026 10.3752 13.6207C8.4954 11.741 7.05092 9.79561 6.17241 8.12028C7.06357 6.78465 8.40124 5.77312 9.96933 5.29866C10.6108 5.10457 11.2923 4.99986 12 4.99986C15.866 4.99986 19 8.13386 19 11.9999C19 12.7083 18.8951 13.3904 18.7006 14.0325C18.2261 15.5991 17.2155 16.9356 15.8812 17.8264ZM13.6052 18.8152C13.0901 18.9359 12.5528 18.9999 12 18.9999C8.13401 18.9999 5 15.8658 5 11.9999C5 11.4476 5.06377 10.9109 5.18429 10.3963C6.14883 11.913 7.43475 13.5087 8.96096 15.0349C10.489 16.563 12.0868 17.8502 13.6052 18.8152Z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3.91762 8.03672C3.32984 9.2334 3 10.5794 3 12C3 16.9705 7.02944 21 12 21C13.4216 21 14.7684 20.6697 15.9657 20.0812C16.8385 20.4545 17.6848 20.6993 18.4564 20.7622C19.3582 20.8357 20.3 20.6666 20.9818 19.9848C21.7339 19.2327 21.8625 18.169 21.7279 17.1728C21.6052 16.2639 21.2481 15.2539 20.726 14.2116C20.9051 13.5031 21 12.762 21 12C21 7.02942 16.9706 2.99998 12 2.99998C11.2389 2.99998 10.4987 3.09467 9.79103 3.27331C8.7474 2.74993 7.73605 2.39184 6.8261 2.26846C5.82897 2.13327 4.76406 2.26141 4.01121 3.01425C3.3287 3.69676 3.16001 4.63968 3.2341 5.54245C3.29752 6.31512 3.54313 7.16259 3.91762 8.03672ZM5.3224 5.96587C5.2734 5.75333 5.24204 5.55727 5.2274 5.37885C5.17928 4.79255 5.31727 4.53661 5.42543 4.42846C5.54452 4.30937 5.84797 4.15415 6.55739 4.25033C6.75482 4.2771 6.96951 4.32201 7.2 4.38559C6.50364 4.82539 5.87203 5.35796 5.3224 5.96587ZM19.6124 16.8031C19.6751 17.0317 19.7195 17.2446 19.7459 17.4405C19.8416 18.1487 19.6865 18.4516 19.5676 18.5706C19.4595 18.6786 19.204 18.8165 18.6189 18.7688C18.4419 18.7543 18.2475 18.7234 18.0368 18.6751C18.6427 18.1269 19.1736 17.4972 19.6124 16.8031ZM15.8812 17.8265C14.2046 16.9483 12.2571 15.5027 10.3752 13.6209C8.4954 11.7411 7.05092 9.79573 6.17241 8.1204C7.06357 6.78477 8.40124 5.77324 9.96933 5.29879C10.6108 5.10469 11.2923 4.99998 12 4.99998C15.866 4.99998 19 8.13399 19 12C19 12.7084 18.8951 13.3905 18.7006 14.0326C18.2261 15.5992 17.2155 16.9357 15.8812 17.8265ZM13.6052 18.8153C13.0901 18.9361 12.5528 19 12 19C8.13401 19 5 15.866 5 12C5 11.4478 5.06377 10.911 5.18429 10.3964C6.14883 11.9131 7.43475 13.5089 8.96096 15.0351C10.489 16.5631 12.0868 17.8503 13.6052 18.8153Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

1
extensions-builtin/sd-webui-ux/assets/svg/quill-pen-ai-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4.7134 7.12811L4.46682 7.69379C4.28637 8.10792 3.71357 8.10792 3.53312 7.69379L3.28656 7.12811C2.84706 6.11947 2.05545 5.31641 1.06767 4.87708L0.308047 4.53922C-0.102682 4.35653 -0.102682 3.75881 0.308047 3.57612L1.0252 3.25714C2.03838 2.80651 2.84417 1.97373 3.27612 0.930828L3.52932 0.319534C3.70578 -0.106511 4.29417 -0.106511 4.47063 0.319534L4.72382 0.930828C5.15577 1.97373 5.96158 2.80651 6.9748 3.25714L7.69188 3.57612C8.10271 3.75881 8.10271 4.35653 7.69188 4.53922L6.93228 4.87708C5.94451 5.31641 5.15288 6.11947 4.7134 7.12811ZM6.33421 15.8154C6.51032 15.233 6.7072 14.6562 6.93912 14.0327C8.99484 8.50636 12.4197 5.08172 18.0129 4.21479C17.5 5.35838 17.0151 6.15301 16.5858 6.58237C16.2521 6.91603 15.9185 7.24993 15.5848 7.58407L14.1721 8.99878L15.6279 10.4535C14.4976 12.5384 12.2652 14.1979 9.75193 14.512C8.43544 14.6766 7.29345 15.1188 6.33421 15.8154ZM18 9.99658L17 8.99728C17.3331 8.66372 17.6662 8.33039 18.0027 7.99391C19.0018 6.99303 20.0009 4.99392 21 1.99658C6.31105 1.99658 4.08854 15.422 3.06361 21.6132C3.0419 21.7443 3.02074 21.8722 3 21.9966H4.99824C5.66421 18.6635 7.33146 16.8301 10 16.4966C14 15.9966 17 12.9966 18 9.99658Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
extensions-builtin/sd-webui-ux/assets/svg/restart-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 421 B

1
extensions-builtin/sd-webui-ux/assets/svg/square-fill.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 223 B

1
extensions-builtin/sd-webui-ux/assets/svg/square-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 238 B

1
extensions-builtin/sd-webui-ux/assets/svg/subtract-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 121 B

89
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-about-extension.html Normal file
View File

@@ -0,0 +1,89 @@
<div class="flexbox col padding lrp-32">
<div class="flexbox row lcol">
<div class="flexbox col">
<h2>Anapnoe UI-UX Core</h2>
<div class="column-1">
<p>
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
</p>
<p>
Compatible with both <a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui" target="_blank">Stable Diffusion web UI</a>
and <a href="https://github.com/lllyasviel/stable-diffusion-webui-forge" target="_blank">Stable Diffusion web UI Forge</a> backends.
</p>
<p>
This extension performs frontend optimizations <b>post-DOM load</b> (modifying elements after they're created), meaning developer tools may show initial resource allocation before optimizations apply. In contrast <a href="https://github.com/anapnoe/stable-diffusion-webui-ux" target="_blank">Stable Diffusion web UI UX</a> & <a href="https://github.com/anapnoe/stable-diffusion-webui-ux-forge" target="_blank">Stable Diffusion web UI UX Forge</a> implement <b>upstream backend optimizations</b> that prevent unnecessary element creation entirely, enabling faster performance from initialization.
</p>
</div>
</div>
<div class="flexbox col">
<h2>
Open Source
</h2>
<div class="column-1">
<p>
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.
</p><a href="https://buymeacoffee.com/dayanbayah" target="_blank">💖 Your Support Makes a Difference! 💖</a>
</div>
</div>
</div>
<div class="flexbox col">
<h3>Upcoming add-ons for UI-UX</h3>
<div class="flexbox row lcol">
<div class="flexbox col">
<h2>
Workspaces UI-UX
</h2>
<div class="column-1">
<p>
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.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Workspaces for UI-UX. 🌟</a>
</p>
<div class="about-image-container">
<img class="about-image-fade" alt="Anapnoe UI-UX Workspaces" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png" lazy="true">
<img class="about-image-fade" alt="Anapnoe UI-UX Workspaces" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png" lazy="true">
</div>
</div>
</div>
<div class="flexbox col">
<h2>
Advanced Theme Style configurator [work in progress]
</h2>
<div class="column-1">
<p>
A sophisticated theme editor allowing you to personalize any aspect of the UI-UX.
Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟</a>
</p>
<img alt="Anapnoe UI-UX Advanced Theme editor" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-theme-editor-advanced.png" lazy="true">
</div>
</div>
<div class="flexbox col">
<h2>
Visual Builder for Gradio Apps [work in progress]
</h2>
<div class="column-1">
<p>
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.
</p>
<img alt="Anapnoe Gradio Visual editor" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-gradio-app-visual-builder.png" lazy="true">
</div>
</div>
</div>
</div>
</div>

81
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-about.html Normal file
View File

@@ -0,0 +1,81 @@
<div class="flexbox col padding lrp-32">
<div class="flexbox row lcol">
<div class="flexbox col">
<h2>Anapnoe UI-UX Core</h2>
<div class="column-1">
<p>
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
</p>
</div>
</div>
<div class="flexbox col">
<h2>
Open Source
</h2>
<div class="column-1">
<p>
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.
</p><a href="https://buymeacoffee.com/dayanbayah" target="_blank">💖 Your Support Makes a Difference! 💖</a>
</div>
</div>
</div>
<div class="flexbox col">
<h3>Upcoming add-ons for UI-UX</h3>
<div class="flexbox row lcol">
<div class="flexbox col">
<h2>
Workspaces UI-UX
</h2>
<div class="column-1">
<p>
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.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Workspaces for UI-UX. 🌟</a>
</p>
<div class="about-image-container">
<img class="about-image-fade" alt="Anapnoe UI-UX Workspaces" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png" lazy="true">
<img class="about-image-fade" alt="Anapnoe UI-UX Workspaces" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png" lazy="true">
</div>
</div>
</div>
<div class="flexbox col">
<h2>
Advanced Theme Style configurator [work in progress]
</h2>
<div class="column-1">
<p>
A sophisticated theme editor allowing you to personalize any aspect of the UI-UX.
Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟</a>
</p>
<img alt="Anapnoe UI-UX Advanced Theme editor" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-theme-editor-advanced.png" lazy="true">
</div>
</div>
<div class="flexbox col">
<h2>
Visual Builder for Gradio Apps [work in progress]
</h2>
<div class="column-1">
<p>
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.
</p>
<img alt="Anapnoe Gradio Visual editor" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-gradio-app-visual-builder.png" lazy="true">
</div>
</div>
</div>
</div>
</div>

317
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-app-root.html Normal file
View File

@@ -0,0 +1,317 @@
<div id="anapnoe_app" class="flexbox col app">
<div id="main_wrapper" class="flexbox row no-wrap">
<div id="main-nav" class="layout shrink initial panel ">
<div class="layout-header">
<button title="Anapnoe" tabItemId="#no-split-app, #about_tabitem" tabGroup="main_group" class="xtabs-tab no-drag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<polygon
points="19.5,13.7 21.6,9.9 11.8,9.9 16.7,18.5 17.7,16.7 17.1,15.7 16.7,16.5 13.5,10.9 19.9,10.9 18.9,12.7 " />
<polygon
points="17.3,11.7 15.8,11.7 20.2,19.3 3.8,19.3 12,5.2 14.2,9 15.8,9 12,2.5 1.5,20.7 22.5,20.7 " />
</svg>
<span>Anapnoe</span>
</button>
</div>
<div id="main_nav_content" class="layout-content">
<!--
<button title="Workspace" id="workspace_nav" tabItemId="#no-split-app, #workspaces_tabitem" tabGroup="main_group"
data-click="#tabs" onclick="mainTabs(this, '#tab_anapnoe_dock')" class="xtabs-tab">
<div class="mask-icon icon-dock">
</div>
<span>Workspace</span>
</button>
-->
<div id="main-nav-bar" class="flexbox col shrink">
<button title="Txt2img" id="txt2img_nav" tabItemId="#split-app, #txt2img_tabitem" tabGroup="main_group"
active="true" data-click="#tabs" onclick="mainTabs(this, '#tab_txt2img')" class="xtabs-tab">
<div class="mask-icon icon-txt2img">
</div>
<span>Txt2img</span>
</button>
<button title="Img2img" id="img2img_nav" tabItemId="#split-app, #img2img_tabitem" tabGroup="main_group"
data-click="#tabs" onclick="mainTabs(this, '#tab_img2img')" class="xtabs-tab">
<div class="mask-icon icon-img2img">
</div>
<span>Img2img</span>
</button>
<button title="Extras" id="extras_nav" tabItemId="#split-app, #extras_tabitem" tabGroup="main_group"
data-click="#tabs" onclick="mainTabs(this, '#tab_extras')" class="xtabs-tab">
<div class="mask-icon icon-extras">
</div>
<span>Extras</span>
</button>
<button title="Deforum" id="deforum_nav" tabItemId="#split-app, #deforum_tabitem" tabGroup="main_group" data-click="#tabs" onclick="mainTabs(this, '#tab_deforum_interface')" class="xtabs-tab hidden">
<div class="mask-icon icon-deforum"></div>
<span>Deforum</span>
</button>
<button title="IIBrowser" id="iibrowser_nav" tabItemId="#split-app, #iibrowser_tabitem" tabGroup="main_group" data-click="#tabs" onclick="mainTabs(this, '#tab_infinite-image-browsing')" class="xtabs-tab hidden">
<div class="mask-icon icon-folder-image"></div>
<span>IIBrowser</span>
</button>
<!--
<button tabItemId="#model_merger_tabitem" tabGroup="main_group" onclick="mainTabs(this, '#tab_model_merger')" class="xtabs-tab">
<div class="mask-icon icon-model-merger">
</div>
<span>Checkpoint Merger</span>
</button>
-->
<!--
<button title="Train" tabItemId="#split-app, #train_tabitem" tabGroup="main_group" data-click="#tabs"
onclick="mainTabs(this, '#tab_train')" class="xtabs-tab">
<div class="mask-icon icon-train">
</div>
<span>Train</span>
</button>
-->
<!-- <button id="right_sidebar_button" tabItemId="#template-aside" tabGroup="main_group" class="xtabs-tab">
<div class="mask-icon icon-train"></div>
<span>Sidebar</span>
</button> -->
<div id="other_extensions" class="flexbox col">
</div>
<!-- <button title="Sidebar" tabItemId="#template-right-sidebar" tabGroup="main_group" class="xtabs-tab">
<div class="mask-icon icon-train">
</div>
<span>Sidebar</span>
</button> -->
<!--
<button tabItemId="#extensions_tabitem" tabGroup="main_group" data-click="#tabs" onclick="mainTabs(this, '#tab_extensions')" class="xtabs-tab">
<div class="mask-icon icon-extensions">
</div>
<span >Extensions</span>
</button>
-->
</div>
<div id="main-nav-bar-bottom" class="flexbox col align-flex-end">
</div>
</div>
<div class="layout-footer">
<!--
<button title="Extensions" tabItemId="#no-split-app, #layout-extensions" tabGroup="main_group" id="btn_extensions" data-click="#tabs"
onclick="mainTabs(this, '#tab_extensions')"class="xtabs-tab">
<div class="mask-icon icon-extensions">
</div>
<span>Extensions</span>
</button>
<button title="Settings" tabItemId="#no-split-app, #layout-settings" tabGroup="main_group" id="btn_settings" data-click="#tabs"
onclick="mainTabs(this, '#tab_settings')"class="xtabs-tab">
<div class="mask-icon icon-settings">
</div>
<span>Settings</span>
</button>
<div class="flexbox col spacer-v">
</div>
-->
<button title="Sponsors & Supporters" id="sponsors" tabItemId="#no-split-app, #sponsors_tabitem" tabGroup="main_group" class="xtabs-tab no-drag">
<div class="mask-icon icon-vip">
</div>
<span>Sponsors</span>
</button>
<button title="Contributors" id="contributors" tabItemId="#no-split-app, #contributors_tabitem" tabGroup="main_group" class="xtabs-tab no-drag">
<div class="mask-icon icon-contributors">
</div>
<span>Contributors</span>
</button>
<button id="popup_trigger" tabItemId="#popup_tabitem" tabGroup="popup_group" class="xtabs-tab">
<div class="mask-icon icon-train">
</div>
<span>Popup</span>
</button>
<!-- <div class="ae-button">
<div class="mask-icon accordion-icon icon-arrow-up">
</div>
</div> -->
</div>
</div>
<div id="layout_main_wrapper" class="layout grow initial">
<!--
<div class="layout-header">
<div>Top Header
</div>
</div>
-->
<!-- <div id="anapnoe_app_dock">
</div> -->
<div class="layout-content">
<div class="flexbox row relative">
<div id="no-split-app" class="xtabs-item">
<div id="about_tabitem_parent">
<div title="About" id="about_tabitem" class="xtabs-item no-padding">
<div id="template-about" class="template"></div>
</div>
</div>
<div id="sponsors_tabitem_parent">
<div title="Sponsors & Supporters" id="sponsors_tabitem" class="xtabs-item no-padding">
<!--<div id="template-sponsors" class="template"></div>-->
</div>
</div>
<div id="contributors_tabitem_parent">
<div title="Contributors" id="contributors_tabitem" class="xtabs-item no-padding">
</div>
</div>
<!-- <div id="template-extensions" class="template"></div>
<div id="template-settings" class="template"></div> -->
<!--
<div title="Workspaces" id="workspaces_tabitem" class="xtabs-item no-padding">
<div class="flexbox col">
<div id="workspaces_toolbar" class="flexbox row">
</div>
<div class="flexbox col">
<div data-parent-selector="gradio-app" data-selector="#tab_anapnoe_dock" class="portal no-bg">
</div>
</div>
</div>
</div>
-->
</div>
<div id="split-app" gutterSize="8" direction="horizontal" class="split">
<div data-minSize="0" data-initSize="100" id="split-left" class="split-container">
<div id="txt2img_tabitem_parent">
<div id="txt2img_tabitem" class="xtabs-item no-padding">
<div id="split" direction="horizontal" gutterSize="8" class="split">
<div title="txt2img params" data-minSize="0" data-initSize="50" id="iwse" class="split-container params">
<div id="template-txt2img-params" class="template"></div>
</div>
<div title="txt2img results" data-minSize="0" data-initSize="50" id="icly88" class="split-container">
<div id="template-txt2img-results" class="template"></div>
</div>
</div>
</div>
</div>
<div id="img2img_tabitem_parent">
<div id="img2img_tabitem" class="xtabs-item no-padding">
<div id="split-img2img" direction="horizontal" gutterSize="8" class="split">
<div title="img2img params" title="txt2img" data-minSize="0" data-initSize="50" id="iwsei" class="split-container params">
<div id="template-img2img-params" class="template"></div>
</div>
<div title="img2img results" title="txt2img results" data-minSize="0" data-initSize="50" id="icly88i" class="split-container">
<div id="template-img2img-results" class="template"></div>
</div>
</div>
</div>
</div>
<div id="extras_tabitem_parent">
<div id="extras_tabitem" class="xtabs-item no-padding">
<div id="split-extras" direction="horizontal" gutterSize="8" class="split">
<div title="Extras params" id="esp-c1" data-minSize="0" data-initSize="50"
class="split-container params">
<div id="template-extras-params" class="template"></div>
</div>
<div title="Extras results" id="esp-c2" data-minSize="0" data-initSize="50"
class="split-container">
<div id="template-extras-results" class="template"></div>
</div>
</div>
</div>
</div>
<div id="deforum_tabitem_parent">
<div id="deforum_tabitem" class="xtabs-item no-padding">
<div id="split-deforum" direction="horizontal" gutterSize="8" class="split">
<div title="Deforum params" id="def-c1" data-minSize="0" data-initSize="50" class="split-container params">
<div id="template-deforum-params" class="template"></div>
</div>
<div title="Deforum results" id="def-c2" data-minSize="0" data-initSize="50" class="split-container">
<div id="template-deforum-results" class="template"></div>
</div>
</div>
</div>
</div>
<div id="iibrowser_tabitem_parent">
<div title=" " id="iibrowser_tabitem" class="xtabs-item no-padding">
<div show-button="#iibrowser_nav" data-parent-selector="gradio-app" data-selector="#tab_infinite-image-browsing > div" class="portal"></div>
</div>
</div>
<!--
<div id="model_merger_tabitem" class="xtabs-item">
<div id="template-model-merger" class="template"></div>
</div>
-->
<!--
<div id="train_tabitem_parent">
<div id="train_tabitem" class="xtabs-item no-padding">
<div id="splitt" direction="horizontal" gutterSize="8" class="split">
<div title="Train params" id="tsp-c1" data-minSize="0" data-initSize="50" id="iwswt"
class="split-container params">
<div id="template-train-params" class="template"></div>
</div>
<div title="Train results" id="tsp-c2" data-minSize="0" data-initSize="50" id="iclywt"
class="split-container">
<div id="template-train-results" class="template"></div>
</div>
</div>
</div>
</div>
-->
<div title="Popup" id="popup_tabitem" class="xtabs-item ae-popup">
<div class="ae-popup-inner">
<div id="layout-popup-group" class="flexbox col">
<div id="layout-popup" class="layout">
<div class="layout-content">
<div class="flexbox col relative-height">
<div id="popup-portal" data-parent-selector=".global-popup"
data-selector=".global-popup-inner" class="portal dynamic">
</div>
<button id="popup_close" tabGroup="popup_group" class="xtabs-tab no-drag">
<div class="mask-icon icon-cancel">
</div>
<span>Close</span>
</button>
</div>
</div>
<!--
<div class="layout-footer">
<div id="portal-mn1" data-parent-selector="#layout-popup-group" data-selector=".global-popup-inner .edit-user-metadata-buttons" class="portal">
</div>
</div>
-->
</div>
</div>
</div>
</div>
</div>
<div data-minSize="0" data-initSize="50" id="split-right" class="split-container no-drag">
<div id="template-aside-extra-networks" class="template"></div>
</div>
</div>
</div>
</div>
<!--
<div class="layout-footer">
<div>Footer
</div>
</div>
-->
</div>
</div>
<!--
<div class="flexbox col app_footer ">
<div id="portal-39f" data-parent-selector="#footer" data-selector=".prose.gradio-html" class="portal no-bg">
</div>
</div>
-->
</div>

137
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-aside-extra-networks.html Normal file
View File

@@ -0,0 +1,137 @@
<div id="accordion-aside" iconTrigger="#acc-arrow-button" class="accordion accordion-vertical no-drag">
<div class="accordion-bar">
<button id="acc-arrow-button" class="ae-button">
<div id="mask-icon-acc-arrow" class="mask-icon accordion-icon icon-arrow-down"></div>
</button>
<div id="sidebar_secondary_tabs" class="flexbox col">
<button class="ae-button">
<a title="Use via API" target="_blank" href="/docs">
<div title="Use via API" class="mask-icon icon-rocket"></div>
<span>Use via API</span>
</a>
</button>
<button class="ae-button">
<a id="github-project-link" title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux-forge">
<div class="mask-icon icon-github"></div>
<span>Github</span>
</a>
</button>
<button class="ae-button">
<a title="Gradio" target="_blank" href="https://gradio.app">
<div class="mask-icon icon-gradio"></div>
<span>Gradio</span>
</a>
</button>
<button class="ae-button">
<a title="Reload UI" href="/" onclick="javascript:gradioApp().getElementById('settings_restart_gradio').click(); return false">
<div class="mask-icon icon-reload"></div>
<span>Reload UI</span>
</a>
</button>
<div class="flexbox col spacer-v"></div>
</div>
<div class="flexbox col"></div>
<div id="sidebar_tabs" class="flexbox col shrink">
<button title="Quick Settings" tabItemId="#layout-quicksettings" tabGroup="extra_networks" id="btn_quick_settings" class="xtabs-tab">
<div class="mask-icon icon-quicksettings"></div>
<span>Quick Settings</span>
</button>
<button title="PNG Info" tabItemId="#layout-pnginfo" tabGroup="extra_networks" id="ptn_pnginfo" class="xtabs-tab">
<div class="mask-icon icon-pnginfo"></div>
<span>PNG Info</span>
</button>
<button title="Checkpoint Merger" tabItemId="#layout-model-merger" tabGroup="extra_networks" onclick="mainTabs(this, '#tab_model_merger')" class="xtabs-tab">
<div class="mask-icon icon-model-merger"></div>
<span>Checkpoint Merger</span>
</button>
<button title="Theme Editor" id="btn_theme_editor" tabItemId="#layout-theme" tabGroup="extra_networks" class="xtabs-tab hidden">
<div id="mask-icon-theme" class="mask-icon icon-theme"></div>
<span>Theme</span>
</button>
<div class="flexbox col spacer-v"></div>
<button title="Spaces" tabItemId="#layout-spaces" tabGroup="extra_networks" id="btn_spaces" class="xtabs-tab">
<div class="mask-icon icon-spaces">
</div>
<span>Spaces</span>
</button>
<div class="flexbox col spacer-v"></div>
<button title="Extensions" tabItemId="#layout-extensions" tabGroup="extra_networks" id="btn_extensions" class="xtabs-tab">
<div class="mask-icon icon-extensions"></div>
<span>Extensions</span>
</button>
<button title="Settings" tabItemId="#layout-settings" tabGroup="extra_networks" id="btn_settings" class="xtabs-tab">
<div class="mask-icon icon-settings"></div>
<span>Settings</span>
</button>
<button title="Console Log" tabItemId="#layout-console-log" tabGroup="extra_networks" id="btn_console" class="xtabs-tab">
<div class="mask-icon icon-terminal"></div>
<span>Console Log</span>
</button>
</div>
<div id="sidebar_extra_networks_db" class="flexbox col shrink">
<button title="Checkpoints" id="checkpoints_nav" tabItemId="#layout_db_checkpoints" tabGroup="extra_networks" class="xtabs-tab" active="true">
<div class="mask-icon icon-checkpoints"></div>
<span>Checkpoints</span>
</button>
<button title="Textual Inversion" id="textual_inversion_nav" tabItemId="#layout_db_textual_inversion" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-textual-inversion"></div>
<span>Textual Inversion</span>
</button>
<button title="LORA" id="lora_nav" tabItemId="#layout_db_lora" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-lora"></div>
<span>LORA</span>
</button>
<button title="Hypernetworks" id="hypernetwork_nav" tabItemId="#layout_db_hypernetworks" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-hypernetworks"></div>
<span>Hypernetworks</span>
</button>
<button title="Styles" tabItemId="#layout_db_styles" tabGroup="extra_networks" id="sd_styles_nav" class="xtabs-tab hidden">
<div class="mask-icon icon-stylez"></div>
<span>Styles</span>
</button>
<button title="Images" tabItemId="#layout_db_output_images" tabGroup="extra_networks" id="sd_output_images_nav" class="xtabs-tab hidden">
<div class="mask-icon icon-gallery"></div>
<span>Browser</span>
</button>
<div class="flexbox col spacer-v"></div>
<div id="civitai_explorer_nav" class="flexbox col hidden">
<button title="Civitai Images" id="civitai_nav_images" tabItemId="#civitai_images_tabitem" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-civitai-images"></div>
<span>Images</span>
</button>
<button title="Civitai Models" id="civitai_nav_models" tabItemId="#civitai_models_tabitem" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-civitai-models"></div>
<span>Models</span>
</button>
<div class="flexbox col spacer-v"></div>
</div>
</div>
</div>
<div class="accordion-container">
<div id="template-pnginfo" class="template"></div>
<div id="template-quicksettings" class="template"></div>
<div id="template-extensions" class="template"></div>
<div id="template-settings" class="template"></div>
<div id="template-model-merger" class="template"></div>
<div id="template-console-log" class="template"></div>
<div id="template-civitai-explorer" class="template"></div>
<div template="template-extra-networks-db" key="checkpoints" id="exn_checkpoints" class="template"></div>
<div template="template-extra-networks-db" key="textual_inversion" id="exn_textual_inversion" class="template"></div>
<div template="template-extra-networks-db" key="hypernetworks" id="exn_hypernetworks" class="template"></div>
<div template="template-extra-networks-db" key="lora" id="exn_lora" class="template"></div>
<div id="layout-theme" class="flexbox col padding">
<div show-button="#btn_theme_editor" data-selector="[id^='tab_ui_theme'] > div" data-parent-selector="gradio-app" class="portal no-bg"></div>
</div>
<div id="layout-spaces" class="flexbox col padding">
<div data-selector="#tab_space > div" data-parent-selector="gradio-app" class="portal no-bg">
</div>
</div>
<div id="template-styles-db" key="styles" id="sd_styles" class="template"></div>
<div id="template-styles-db" key="output_images" id="sd_output_images" class="template"></div>
</div>
</div>

83
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-civitai-explorer.html Normal file
View File

@@ -0,0 +1,83 @@
<div id="layout-civitai-explorer-group" class="flexbox col">
<div id="layout-civitai-explorer" class="layout no-padding">
<div id="civitai_images_tabitem" class="xtabs-item layout-extra-networks">
<div id="layout-civitai-cards-images" class="layout">
<div class="layout-header">
<div class="flexbox row flex-start group-row">
<input id="civit_search_images" type="text" placeholder="Search User.." class="flex-width">
<button id="civit_search_images_clear" class="ae-button shrink">
<div class="mask-icon icon-cancel"></div>
</button>
<select id="civit_sort_images">
<option selected value="Most Reactions">Most Reactions</option>
<option value="Most Comments">Most Comments</option>
<option value="Newest">Newest</option>
</select>
<select id="civit_period_images">
<option selected value="AllTime">AllTime</option>
<option value="Year">Year</option>
<option value="Month">Month</option>
<option value="Week">Week</option>
<option value="Day">Day</option>
</select>
<select id="civit_nsfw_images">
<option selected value="None">None</option>
<option value="Soft">Soft</option>
<option value="Mature">Mature</option>
<option value="X">X</option>
</select>
</div>
</div>
<div class="layout-content">
<div id="civitai_cardholder_images" class="ae-virtual-cardholder"></div>
</div>
</div>
</div>
<div id="civitai_models_tabitem" class="xtabs-item layout-extra-networks">
<div id="layout-civitai-cards-models" class="layout">
<div class="layout-header">
<div class="flexbox row flex-start group-row">
<input id="civit_search_models" type="text" placeholder="Search.." class="flex-width">
<button id="civit_search_models_clear" class="ae-button shrink">
<div class="mask-icon icon-cancel"></div>
</button>
<select id="civit_type_models">
<option selected value="">All</option>
<option value="Checkpoint">Checkpoint</option>
<option value="LORA">LORA</option>
<option value="TextualInversion">TextualInversion</option>
<option value="Hypernetwork">Hypernetwork</option>
<option value="AestheticGradient">AestheticGradient</option>
<option value="Controlnet">Controlnet</option>
<option value="Poses">Poses</option>
</select>
<select id="civit_sort_models">
<option selected value="Highest Rated">Highest Rated</option>
<option value="Most Downloaded">Most Downloaded</option>
<option value="Most Liked">Most Liked</option>
<option value="Most Discussed">Most Discussed</option>
<option value="Most Collected">Most Collected</option>
<option value="Most Images">Most Images</option>
<option value="Newest">Newest</option>
<option value="Oldest">Oldest</option>
</select>
<select id="civit_period_models">
<option selected value="AllTime">AllTime</option>
<option value="Year">Year</option>
<option value="Month">Month</option>
<option value="Week">Week</option>
<option value="Day">Day</option>
</select>
<select id="civit_nsfw_models">
<option selected value="false">NSFW</option>
<option value="true">Disabled</option>
</select>
</div>
</div>
<div class="layout-content">
<div id="civitai_cardholder_models" class="ae-virtual-cardholder"></div>
</div>
</div>
</div>
</div>
</div>

31
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-console-log.html Normal file
View File

@@ -0,0 +1,31 @@
<div id="layout-console-log" class="layout">
<div class="layout-content">
<div class="xtabs flexbox col">
<div id="logger_tabitem" class="xtabs-item no-padding">
<div id="container-console-log"></div>
</div>
<div id="profile_tabitem" class="xtabs-item no-padding">
<div data-parent-selector=".global-popup" data-selector="table.popup-table" class="portal dynamic"></div>
</div>
<div id="pylogger_tabitem" class="xtabs-item no-padding">
<div data-parent-selector="gradio-app" data-selector="#tab_anapnoe_sd_uiux_core" class="portal dynamic"></div>
</div>
</div>
</div>
<div class="layout-footer">
<div class="flexbox padding">
<button title="Console Log" id="logger_nav" active="true" tabItemId="#logger_tabitem" tabGroup="console_group" class="xtabs-tab">
<div class="mask-icon icon-terminal"></div>
<span>Console Log</span>
</button>
<button title="Python Log" id="pylogger_nav" tabItemId="#pylogger_tabitem" tabGroup="console_group" data-click="#tabs" onclick="mainTabs(this, '#tab_anapnoe_sd_uiux_core')" class="xtabs-tab">
<div class="mask-icon icon-terminal"></div>
<span>Python Log</span>
</button>
<button id="profile_nav" title="Startup profile" class="xtabs-tab" tabItemId="#profile_tabitem" tabGroup="console_group" onclick="showProfile('./internal/profile-startup'); return false;">
<div class="mask-icon icon-profile"></div>
<span>Startup profile</span>
</button>
</div>
</div>
</div>

78
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-deforum-params.html Normal file
View File

@@ -0,0 +1,78 @@
<div id="layout-deforum" class="layout">
<div class="layout-header">
<div class="flexbox row shrink panel padding no-br">
<div id="deforum_header_top" class="flexbox row no-wrap shrink no-labels flex-start group-row">
<button title="Settings" tabItemId="#deforum_settings_tabitem" tabGroup="deforum" id="deforum_settings" class="xtabs-tab shrink">
<div class="mask-icon icon-settings"></div>
<span>Settings</span>
</button>
<button title="Parameters" tabItemId="#deforum_params_tabitem" tabGroup="deforum" id="deforum_params" active="true" class="xtabs-tab shrink">
<div class="mask-icon icon-equalize"></div>
<span>Params</span>
</button>
<button title="deforum Results" tabItemId="#deforum_results_mobile_tabitem" tabGroup="deforum" id="deforum_results_mobile" class="xtabs-tab mobile">
<div class="mask-icon icon-results"></div>
<span>Results</span>
</button>
</div>
<div id="deforum_generate_group" class="flexbox row flex-end group-row">
<!--
<div title="Skip" data-selector="#deforum_skip" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible shrink no-bg no-padding-one disable">
<div class="mask-icon icon-skip">
</div>
</div>
-->
<div title="Interrupt" data-selector="#deforum_interrupt" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible shrink no-bg no-padding-one disable">
<div class="mask-icon icon-stop"></div>
</div>
<button title="Generate" class="ae-button generate no-rr">
<div data-selector="#deforum_generate" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal no-bg shrink invisible">
<div class="mask-icon icon-generate"></div>
<span>Generate</span>
</div>
</button>
<!--
<button title="Generate forever" id="deforum_loop" toggle="true" class="ae-button no-lr shrink">
<div class="mask-icon icon-loop">
</div>
</button>
-->
</div>
</div>
</div>
<div class="layout-content">
<div class="xtabs panel auto no-tr">
<div class="flexbox col shrink">
<div id="deforum_params_tabitem_group" class="flexbox col no-padding">
<div id="deforum_params_tabitem" class="xtabs-item">
<!--<div data-parent-selector="gradio-app" data-selector="#deforum_progress_row > div:first-child" class="portal no-bg">
</div>-->
<div data-parent-selector="gradio-app" data-selector="#deforum_progress_row > div > .tabs" class="portal no-bg"></div>
</div>
</div>
<div id="deforum_settings_tabitem_group" class="flexbox col">
<div id="deforum_settings_tabitem" class="xtabs-item">
<div data-parent-selector="gradio-app" data-selector="#deforum_progress_row > div > div > .gradio-checkbox" class="portal no-bg"></div>
<div class="flexbox col group">
<div data-parent-selector="gradio-app" data-selector="#deforum_settings_path" class="portal"></div>
<div class="flexbox no-border row">
<div data-parent-selector="gradio-app" data-selector="#deforum_save_settings_btn" class="portal no-bg"></div>
<div data-parent-selector="gradio-app" data-selector="#deforum_load_settings_btn" class="portal no-bg"></div>
<div data-parent-selector="gradio-app" data-selector="#deforum_load_video_settings_btn" class="portal no-bg"></div>
</div>
</div>
<div data-parent-selector="gradio-app" data-selector="#main_top_info_accord" class="portal padding no-bg"></div>
</div>
</div>
<div id="deforum_results_mobile_tabitem_group" class="flexbox col mobile">
<div id="deforum_results_mobile_tabitem" mobile="#template-deforum-results" class="xtabs-item"></div>
</div>
</div>
</div>
</div>
<div class="layout-footer hidden">
<div class="xtabs-tabs row panel">
<div id="dportal-40ee" data-parent-selector="gradio-app" data-selector="#tab_deforum_interface" class="portal"></div>
</div>
</div>
</div>

82
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-deforum-results.html Normal file
View File

@@ -0,0 +1,82 @@
<div id="dflexbox-6" class="flexbox col full-height border-padding">
<div id="dportal-21" data-selector="#deforum_gallery" data-parent-selector="#tab_deforum" class="portal full-height no-br" droppable="true">
<div class="flexbox col progress-flex">
<div data-selector="#deforum_gallery_container" data-parent-selector="gradio-app" class="portal"></div>
</div>
<div id="deforum-video-preview" data-parent-selector="gradio-app" data-selector="#deforum_header.prose.gradio-html" class="portal no-border hidden"></div>
</div>
<div id="accordion-3" iconTrigger="#info_icon_btn" class="accordion no-tr">
<div class="accordion-bar no-tr">
<div id="dflexbox-29" class="flexbox row center">
<!--
<button id="info_icon_btn" toggle="true" class="ae-button">
<div id="info_icon" class="mask-icon icon-info">
</div>
</button>
-->
<!--
<div data-parent-selector="gradio-app" data-selector="#deforum_progress_row > .compact > div:first-child" class="portal no-border"></div>
-->
<button title="Click here after the generation to show or update the video" id="ae-button-211" class="ae-button">
<div data-selector="#deforum_progress_row > .compact > div:first-child > button:first-child" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-390" class="mask-icon icon-video"></div>
</div>
</button>
<button title="Close the video" id="ae-button-close-video" class="ae-button">
<div data-selector="#deforum_progress_row > .compact > div:first-child > button:last-child" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-391" class="mask-icon icon-cancel"></div>
</div>
</button>
<button id="ae-button-2" class="ae-button">
<div id="dportal-5" data-selector="#deforum_open_folder" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-39" class="mask-icon icon-folder"></div>
</div>
</button>
<!--
<button id="ae-button-3" class="ae-button">
<div id="dportal-10" data-selector="#save_deforum" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-40" class="mask-icon icon-save">
</div>
</div>
</button>
<button id="ae-button-4" class="ae-button">
<div id="dportal-11" data-selector="#save_zip_deforum" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-41" class="mask-icon icon-zip">
</div>
</div>
</button>
-->
<button id="ae-button-6" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="dportal-12" data-selector="#deforum_send_to_inpaint" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-42" class="mask-icon icon-2inpaint"></div>
</div>
</button>
<button id="ae-button-5" class="ae-button" data-click="#extras_nav">
<div id="dportal-13" data-selector="#deforum_send_to_extras" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-43" class="mask-icon icon-2extras"></div>
</div>
</button>
<button id="ae-button-7" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="dportal-14" data-selector="#deforum_send_to_img2img" data-parent-selector="#tab_deforum_interface" droppable="true" class="portal invisible">
<div id="mask-icon-44" class="mask-icon icon-2img2img"></div>
</div>
</button>
<!--
<button id="ae-button-8" class="ae-button">
<div id="dportal-15" data-selector="#deforum_upscale" data-parent-selector="#tab_deforum" droppable="true" class="portal invisible">
<div id="mask-icon-45" class="mask-icon icon-2extras">
</div>
</div>
</button>
-->
</div>
</div>
<div id="acc-c-3" class="accordion-container info-results-container">
<div id="dflexbox-4" class="flexbox col">
<div id="dportal-29" show-button="#deforum_nav" data-parent-selector="#tab_deforum_interface" data-selector="#download_files_deforum" data-vis="true" class="portal shrink hide-empty"></div>
<div id="dportal-30" data-parent-selector="#tab_deforum_interface" data-selector="#html_info_deforum" data-vis="true" class="portal hide-empty"></div>
<div id="dportal-31" data-parent-selector="#tab_deforum_interface" data-selector="#html_log_deforum" data-vis="true" class="portal hide-empty"></div>
</div>
</div>
</div>
</div>

15
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-extensions.html Normal file
View File

@@ -0,0 +1,15 @@
<div id="layout-extensions" class="flexbox col">
<div id="layout-extensions-group" class="layout panel">
<div class="layout-header">
<div class="flexbox row">
<div data-selector="#tabs_extensions .tab-nav" data-parent-selector="gradio-app" class="portal no-padding no-bg">
</div>
</div>
</div>
<div class="layout-content tabs_extensions" >
<div data-selector="#tabs_extensions" data-parent-selector="gradio-app" class="portal no-padding">
</div>
</div>
</div>
</div>

95
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-extra-networks-db.html Normal file
View File

@@ -0,0 +1,95 @@
<div id="layout_db_{{template_key}}" class="layout no-padding-one layout-extra-networks">
<div class="flexbox row padding flex-start group-row">
<div id="{{template_key}}_search_row" class="flexbox row flex-start group-row">
<button id="{{template_key}}_show-dirs" toggle="true" class="ae-button shrink show-dirs">
<div class="mask-icon icon-node-tree"></div>
</button>
<input id="{{template_key}}_search" class="grow" type="text" placeholder="Search..{{template_key}}">
<button id="{{template_key}}_clear" class="ae-button shrink">
<div class="mask-icon icon-cancel"></div>
</button>
</div>
<select id="{{template_key}}_search_in" class="grow" >
<option selected value="filename">Path</option>
<option value="hash">Hash</option>
<option value="description">Description</option>
<option value="notes">Notes</option>
<option value="tags">Tags</option>
<!--<option value="train_tags">Train tags</option>-->
</select>
<select id="{{template_key}}_sd_version" class="grow" >
<option selected value="">All</option>
<option value="SD1">SD1</option>
<option value="SD2">SD2</option>
<option value="SD3">SD3</option>
<option value="SDXL">SDXL</option>
<option value="PONY">PONY</option>
<option value="FLUX">FLUX</option>
<option value="Unknown">Unknown</option>
</select>
<!---<div class="flexbox row flex-start group-row">-->
<select id="{{template_key}}_sort" class="grow" >
<option selected value="id">Default Sort</option>
<option value="name">Name</option>
<option value="filename">Path</option>
<option value="date_created">Date Created</option>
<option value="date_modified">Date Modified</option>
</select>
<button id="{{template_key}}_order" toggle="true" class="ae-button shrink reverse-order">
<div class="mask-icon icon-sort"></div>
</button>
<!--</div>-->
<button id="{{template_key}}_refresh" class="ae-button shrink reverse-order">
<div class="mask-icon refresh"></div>
</button>
<button title="Rebuild thumbnails" id="{{template_key}}_rebuild" class="ae-button shrink reverse-order">
<div class="mask-icon icon-rebuild-thumbs"></div>
</button>
<button title="Settings" toggle="true" tabItemId="#{{template_key}}_settings_db" class="xtabs-tab">
<div class="mask-icon icon-settings"></div>
</button>
</div>
<div id="{{template_key}}_aside_split_db" direction="horizontal" gutterSize="8" class="split">
<div id="{{template_key}}_aside_db" data-minSize="0" data-initSize="0" class="split-container exnet-left no-drag">
<div class="layout">
<div class="layout-content">
<div id="{{template_key}}_tree_view" class="tree-view-container">
</div>
</div>
</div>
</div>
<div id="{{template_key}}_main_db" data-minSize="0" data-initSize="100" class="split-container exnet-right no-drag">
<div class="layout no-top-padding">
<div class="layout-header flexbox col relative">
<div id="{{template_key}}_settings_db" class="extra-network-settings flexbox col panel relative">
<div class="flexbox row">
<div data-selector="#setting_uiux_exnet_aspect_ratio_x" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_aspect_ratio_y" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_fit_size" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_header_size" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_image_tint" data-parent-selector="gradio-app" class="portal dynamic"></div>
<button class="ae-button shrink" data-click="#settings_submit">
<div class="mask-icon icon-save"></div>
</button>
</div>
</div>
</div>
<div class="layout-content no-top-padding">
<div id="{{template_key}}_cardholder" class="ae-virtual-cardholder"></div>
<!--
<div class="xtabs auto-scroll">
<div class="xtabs-items no-padding">
</div>
</div>
-->
</div>
<div id="{{template_key}}_main_footer_db" class="layout-footer ">
<div class="flexbox col model-preloader"></div>
<div class="flexbox col model-selected"></div>
</div>
</div>
</div>
</div>
</div>

116
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-extras-params.html Normal file
View File

@@ -0,0 +1,116 @@
<div id="layout-extras" class="layout">
<div class="layout-header">
<div class="flexbox row shrink panel padding no-br">
<div id="extras_header" class="flexbox row no-wrap shrink no-labels flex-start group-row">
<button title="Parameters" tabItemId="#extras_params_tabitem" tabGroup="extras" id="extras_params" active="true" class="xtabs-tab shrink">
<div class="mask-icon icon-equalize">
</div>
<span>Params</span>
</button>
<button title="Extras Results" tabItemId="#extras_results_mobile_tabitem" tabGroup="extras" id="extras_results_mobile" class="xtabs-tab mobile">
<div class="mask-icon icon-results">
</div>
<span>Results</span>
</button>
</div>
<div class="flexbox row flex-end">
<button class="ae-button">
<div data-selector="#extras_generate" data-parent-selector="#tab_extras" droppable="true" class="portal no-bg shrink invisible">
<div class="mask-icon icon-generate">
</div>
<span>Upscale</span>
</div>
</button>
</div>
</div>
</div>
<div class="layout-content">
<div class="xtabs panel auto no-tr">
<div class="flexbox col shrink">
<div id="extras_params_tabitem_group" class="flexbox col">
<div id="extras_params_tabitem" class="xtabs-item">
<div data-parent-selector="#tab_extras" data-selector="#mode_extras" class="portal min-width no-padding">
</div>
<div data-parent-selector="#tab_extras" data-selector="#extras_upscale" droppable="true" append-index="0" class="portal min-width">
<div class="flexbox col gap" style="padding-bottom: 0;">
<div id="flexbox-18ihe" class="flexbox row wrap">
<div id="flexbox-18iehe" class="flexbox row grow-all group no-wrap" style="padding: 0;outline: 0;">
<div class="flexbox panel col shrink">
<button tabItemId="#extras_scale_by_tabitem" tabGroup="extras-scale-group" data-click="#tab_extras" active="true" class="xtabs-tab no-drag "><span
id="ir9t74">Scale by</span></button>
<button tabItemId="#extras_scale_to_tabitem" tabGroup="extras-scale-group" data-click="#tab_extras" class="xtabs-tab no-drag"><span id="izj18e">Scale to</span></button>
</div>
<div class="flexbox col">
<div class="xtabs sub-group no-padding">
<div class="xtabs-items">
<div class="flexbox col no-padding full-height">
<div id="extras_scale_to_tabitem" class="xtabs-item notransition inset initial">
<div class="flexbox row wrap">
<div class="flexbox no-wrap row">
<div class="flexbox col">
<div id="portal-54e" data-parent-selector="#tab_extras" data-selector="#extras_upscaling_resize_w" class="portal">
</div>
<div id="portal-85e" data-parent-selector="#tab_extras" data-selector="#extras_upscaling_resize_h" class="portal">
</div>
</div>
<div class="flexbox unset-min-width shrink col panel padding center">
<div id="portal-86e" data-selector="#upscaling_res_switch_btn" data-parent-selector="#tab_extras" droppable="true"
class="portal no-padding shrink invisible tool">
<div class="mask-icon icon-res-switch">
</div>
</div>
<button id="ae-button-crop" toggle="true" class="ae-button shrink tool" title="Crop to fit">
<div id="portal-106e" data-parent-selector="#tab_extras" data-selector="#extras_upscaling_crop" droppable="true"
class="portal shrink invisible tool">
<div class="mask-icon icon-crop">
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<div id="extras_scale_by_tabitem" class="xtabs-item initial inset notransition">
<div class="flexbox col">
<div id="portal-88e" data-parent-selector="#tab_extras" data-selector="#extras_upscaling_resize" class="portal min-width"></div>
<div id="portal-89e" data-parent-selector="#tab_extras" data-selector="#extras_upscale_max_side_length" class="portal">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="accordions-extras" data-parent-selector="#tab_extras" data-selector="#tab_extras > div > div.gradio-row > div.gradio-column" class="portal min-width no-padding" style="outline:0;">
</div>
</div>
</div>
<div id="extras_results_mobile_tabitem_group" class="flexbox col mobile">
<div id="extras_results_mobile_tabitem" mobile="#template-extras-results" class="xtabs-item">
</div>
</div>
</div>
</div>
</div>
<div class="layout-footer hidden">
<div class="xtabs-tabs row panel">
<div id="portal-accordion" data-parent-selector="gradio-app" data-selector="#tab_extras" class="portal">
</div>
<div id="portal-7irt2ee" data-selector="#extras_resize_mode" data-parent-selector="#tab_extras" class="portal">
</div>
</div>
</div>
</div>

51
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-extras-results.html Normal file
View File

@@ -0,0 +1,51 @@
<div id="flexbox-e6" class="flexbox col full-height border-padding">
<div id="portal-e21" data-selector="#extras_gallery" data-parent-selector="#tab_extras" class="portal full-height no-br" droppable="true">
<div class="flexbox col progress-flex">
<div data-selector="#extras_gallery_container" data-parent-selector="gradio-app" class="portal"></div>
</div>
</div>
<div id="accordion-e3" iconTrigger="#info_extras_icon_btn" class="accordion no-tr">
<div class="accordion-bar no-tr">
<div id="flexbox-e29" class="flexbox row center">
<button id="info_extras_icon_btn" toggle="true" class="ae-button">
<div class="mask-icon icon-info">
</div>
</button>
<button id="ae-button-e2" class="ae-button">
<div id="portal-e5" data-selector="#extras_open_folder" data-parent-selector="#tab_extras" droppable="true" class="portal invisible">
<div id="mask-icon-e39" class="mask-icon icon-folder">
</div>
</div>
</button>
<button id="ae-button-e6" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="portal-e12" data-selector="#extras_send_to_inpaint" data-parent-selector="#tab_extras" droppable="true" class="portal invisible">
<div id="mask-icon-e42" class="mask-icon icon-2inpaint">
</div>
</div>
</button>
<button id="ae-button-e5" class="ae-button" data-click="#extras_nav">
<div id="portal-e13" data-selector="#extras_send_to_extras" data-parent-selector="#tab_extras" droppable="true" class="portal invisible">
<div id="mask-icon-e43" class="mask-icon icon-2extras">
</div>
</div>
</button>
<button id="ae-button-e7" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="portal-e14" data-selector="#extras_send_to_img2img" data-parent-selector="#tab_extras" droppable="true" class="portal invisible">
<div id="mask-icon-e44" class="mask-icon icon-2img2img">
</div>
</div>
</button>
</div>
</div>
<div id="acc-ec-3" class="accordion-container .info-results-container">
<div id="flexbox-e4" class="flexbox col">
<div id="portal-e30" data-parent-selector="#tab_extras" data-selector="#html_info_x_extras" class="portal hide-empty">
</div>
<div id="portal-e31" data-parent-selector="#tab_extras" data-selector="#html_info_extras" class="portal hide-empty">
</div>
</div>
</div>
</div>
</div>

409
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-img2img-params.html Normal file
View File

@@ -0,0 +1,409 @@
<div id="layout-img2img" class="layout">
<div class="layout-header">
<div id="img2img_header_panel" class="flexbox row shrink panel padding no-br">
<div id="img2img_header" class="flexbox row no-wrap shrink no-labels flex-start group-row">
<button title="Prompts" tabItemId="#img2img_prompts_tabitem" tabGroup="img2img" id="img2img_prompts" active="true" class="xtabs-tab shrink">
<div class="mask-icon icon-prompt">
</div>
<span>Prompts</span>
</button>
<button title="Prompts" tabItemId="#img2img_phystonPrompt_tabitem" tabGroup="img2img" id="btn_img2img_physton" class="xtabs-tab shrink hidden">
<div class="mask-icon icon-physton">
</div>
<span>Physton</span>
</button>
<!-- <button tabItemId="#img2img_image_tabitem" tabGroup="img2img" id="ilnvy-2ii" class="xtabs-tab shrink">
<div id="mask-icon-6-2i" class="mask-icon icon-image-edit">
</div>
<span>Image</span>
</button> -->
<button title="Parameters" tabItemId="#img2img_params_tabitem" tabGroup="img2img" id="img2img_params" class="xtabs-tab shrink">
<div class="mask-icon icon-equalize">
</div>
<span>Params</span>
</button>
<button title="Scripts / Extensions" tabItemId="#img2img_scripts_tabitem" tabGroup="img2img" id="img2img_scripts" class="xtabs-tab">
<div class="mask-icon icon-scripts">
</div>
<span>Scripts</span>
</button>
<button title="img2img Results" tabItemId="#img2img_results_mobile_tabitem" tabGroup="img2img" id="img2img_results_mobile" class="xtabs-tab mobile">
<div class="mask-icon icon-results">
</div>
<span>Results</span>
</button>
<!-- <button tabItemId="#img2img_temp_tabitem" tabGroup="img2img" class="xtabs-tab">
<div id="mask-icon-28i" class="mask-icon icon-bug">
</div>
</button> -->
</div>
<div id="img2img_generate_group" class="flexbox row flex-end group-row">
<div title="Skip" data-selector="#img2img_skip" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible shrink no-bg no-padding-one disable">
<div class="mask-icon icon-skip">
</div>
</div>
<div title="Interrupt" data-selector="#img2img_interrupt" data-parent-selector="#tab_img2img" droppable="true"
class="portal invisible shrink no-bg no-padding-one disable">
<div class="mask-icon icon-stop">
</div>
</div>
<button title="Generate" class="ae-button generate no-rr">
<div data-selector="#img2img_generate" data-parent-selector="#tab_img2img" droppable="true" class="portal no-bg shrink invisible">
<div class="mask-icon icon-generate">
</div>
<span>Generate</span>
</div>
</button>
<button title="Generate forever" id="img2img_loop" toggle="true" class="ae-button no-lr shrink">
<div class="mask-icon icon-loop">
</div>
</button>
</div>
</div>
</div>
<div class="layout-content">
<div class="xtabs panel no-padding no-tr">
<div class="xtabs-items">
<div id="img2img_image_tabitem_group" class="flexbox col">
<div id="img2img_image_tabitem" class="xtabs-item">
<div class="flexbox col">
<!--
<div id="portal-6im" data-selector="#mode_img2img" data-parent-selector="#tab_img2img" class="portal">
</div> -->
<!--
<div id="portal-6imn" data-selector="#resize_mode" data-parent-selector="#tab_img2img" class="portal">
</div>
<div id="portal-6imsw" data-selector="#inpaint_controls" data-parent-selector="#tab_img2img" class="portal">
</div> -->
</div>
</div>
</div>
<div id="img2img_prompts_tabitem_group" class="flexbox col">
<div id="img2img_prompts_tabitem" class="xtabs-item">
<div class="layout">
<div class="layout-header">
<div class="flexbox row no-padding">
<div class="flexbox no-border no-bg shrink row">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_tools #paste" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-magic">
</div>
</div>
<div data-parent-selector="#img2img_tools" data-selector="#img2img_clear_prompt" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-delete">
</div>
</div>
</div>
<div class="flexbox no-border no-bg row">
<div data-parent-selector="#img2img_styles_row" data-selector="#img2img_styles" class="portal no-min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_styles_edit_button" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-styles-edit">
</div>
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_style_apply" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-styles-apply">
</div>
</div>
</div>
</div>
</div>
<div class="layout-content">
<div class="flexbox col">
<div id="split-2i" direction="vertical" gutterSize="8" class="split">
<div data-minSize="0" data-initSize="50" id="iubsli" class="split-container">
<div class="layout no-padding">
<!-- <div class="layout-header">
</div> -->
<div class="layout-content relative">
<div data-selector="#img2img_prompt" data-parent-selector="#tab_img2img" class="portal no-bg">
</div>
</div>
<div class="layout-footer">
<div data-parent-selector="#img2img_prompt" data-selector="#img2img_token_counter.block" class="portal relative token_counter" data-timeout="1000">
</div>
</div>
</div>
</div>
<div data-minSize="0" data-initSize="50" id="idyyfi" class="split-container">
<div class="layout no-padding">
<!-- <div class="layout-header">
</div> -->
<div class="layout-content relative">
<div data-selector="#img2img_neg_prompt" data-parent-selector="#tab_img2img" class="portal no-bg">
</div>
</div>
<div class="layout-footer">
<div data-parent-selector="#img2img_neg_prompt" data-selector="#img2img_negative_token_counter.block" data-timeout="1000"
class="portal relative token_counter">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layout-footer shrink">
<div class="flexbox row">
<div data-parent-selector="#tab_img2img" data-selector="#interrogate" droppable="true"
class="portal shrink no-padding-one no-bg icon-left">
<div class="mask-icon question-answer">
</div>
</div>
<div data-parent-selector="#tab_img2img" data-selector="#deepbooru" droppable="true"
class="portal shrink no-padding-one no-bg icon-left">
<div class="mask-icon question-answer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="img2img_params_tabitem_group" class="flexbox col">
<div id="img2img_params_tabitem" class="xtabs-item">
<div class="flexbox col">
<div data-selector="#mode_img2img" data-parent-selector="#tab_img2img" class="portal">
</div>
</div>
<div id="accordion_mask" class="accordion">
<div class="accordion-bar">
<span class="accordion-title">Inpaint options</span>
<span class="accordion-icon">▼</span>
</div>
<div id="acc-ci" class="accordion-container">
<div data-selector="#inpaint_controls" data-parent-selector="#tab_img2img" class="portal no-bg no-padding">
</div>
</div>
</div>
<div data-selector="#soft_inpainting_enabled" data-parent-selector="#tab_img2img" class="portal no-bg no-padding">
</div>
<div id="accordion_resize_mode" class="accordion">
<div class="accordion-bar">
<span class="accordion-title">Resize mode</span>
<span class="accordion-icon">▼</span>
</div>
<div id="acc-cir" class="accordion-container">
<div data-selector="#resize_mode" data-parent-selector="#tab_img2img" class="portal no-bg no-padding">
</div>
</div>
</div>
<div class="flexbox col">
<div class="flexbox row wrap">
<div class="flexbox row grow-all group no-wrap fb-60G">
<div class="flexbox panel col shrink">
<button tabItemId="#img2img_scale_to_tabitem" tabGroup="img2img-resize-group" data-click="#tab_img2img" active="true" class="xtabs-tab no-drag"><span
id="izj18eih">Resize to</span></button>
<button tabItemId="#img2img_scale_by_tabitem" tabGroup="img2img-resize-group" data-click="#tab_img2img" class="xtabs-tab no-drag"><span>Resize by</span></button>
</div>
<div class="flexbox col">
<div class="xtabs sub-group no-padding">
<div class="xtabs-items">
<div class="flexbox col no-padding full-height">
<div id="img2img_scale_to_tabitem" class="xtabs-item initial inset notransition">
<div class="flexbox row wrap">
<div class="flexbox no-wrap row">
<div class="flexbox col">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_width" class="portal">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_height" class="portal">
</div>
</div>
<div class="flexbox unset-min-width shrink col panel center">
<div data-selector="#img2img_detect_image_size_btn" data-parent-selector="#tab_img2img"
droppable="true" class="portal invisible tool">
<div class="mask-icon icon-ruler">
</div>
</div>
<div data-selector="#img2img_res_switch_btn" data-parent-selector="#tab_img2img"
droppable="true" class="portal invisible tool">
<div class="mask-icon icon-res-switch">
</div>
</div>
<div data-selector="#img2img_dimensions_row" data-parent-selector="#tab_img2img"
class="portal invisible tool">
</div>
</div>
</div>
</div>
</div>
<div id="img2img_scale_by_tabitem" class="xtabs-item initial inset notransition">
<div class="flexbox col group inset subgroup">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_scale" class="portal"></div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_scale_resolution_preview"
class="portal"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flexbox group col fb-40G">
<!-- <div id="flexbox-14wi" class="flexbox row"> -->
<div data-parent-selector="#tab_img2img" data-selector="#img2img_batch_size" class="portal">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_batch_count" class="portal">
<!-- </div> -->
</div>
</div>
</div>
</div>
<div class="flexbox group row">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_sampling" class="portal min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_scheduler" class="portal min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_distilled_cfg_scale" class="portal min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_cfg_scale" class="portal min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_steps" class="portal min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_denoising_strength" class="portal min-width">
</div>
</div>
<div class="flexbox group col">
<div class="flexbox row">
<div class="flexbox no-border row">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_seed" class="portal no-min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_random_seed" droppable="true" class="portal invisible shrink">
<div class="mask-icon icon-dice">
</div>
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_reuse_seed" droppable="true" class="portal shrink invisible">
<div class="mask-icon icon-recycle">
</div>
</div>
<button toggle="true" class="ae-button shrink toggle-seed">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_subseed_show" droppable="true"
class="portal shrink invisible tool">
<div class="mask-icon icon-equalize">
</div>
</div>
</button>
</div>
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_seed_extras" droppable="true" class="portal sub-group">
<div class="flexbox col">
<div class="flexbox row">
<div class="flexbox no-border min-width fb-50 row">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_subseed" class="portal no-min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_random_subseed" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-dice">
</div>
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_reuse_subseed" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-recycle">
</div>
</div>
</div>
<div class="flexbox row fb-50">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_subseed_strength" class="portal min-width fb-50">
</div>
</div>
</div>
<div class="flexbox row wrap">
<div data-parent-selector="#tab_img2img" data-selector="#img2img_seed_resize_from_w" class="portal min-width">
</div>
<div data-parent-selector="#tab_img2img" data-selector="#img2img_seed_resize_from_h" class="portal min-width">
</div>
</div>
</div>
</div>
</div>
<div data-selector="#img2img_enable" data-parent-selector="#tab_img2img" class="portal">
</div>
<div class="flexbox group row">
<div data-selector="#img2img_override_settings" data-parent-selector="#tab_img2img" class="portal">
</div>
</div>
<div data-selector="#layout-img2img .gradio-accordion:has( div[id^='setting_'])" data-parent-selector="gradio-app" class="portal hide-empty">
</div>
<div data-selector="#img2img_container_aspect_ratio" data-parent-selector="#tab_img2img" class="portal hide-empty">
</div>
</div>
</div>
<div id="img2img_scripts_tabitem_group" class="flexbox col">
<div id="img2img_scripts_tabitem" class="xtabs-item">
<div data-selector="#img2img_script_container" data-parent-selector="#tab_img2img" class="portal no-bg">
</div>
</div>
</div>
<div id="img2img_phystonPrompt_tabitem_group" class="flexbox col">
<div id="img2img_phystonPrompt_tabitem" class="xtabs-item">
<div id="split-physton-img2img" direction="vertical" gutterSize="8" class="split">
<div data-minSize="0" data-initSize="50" id="iubslphi" class="split-container">
<div show-button="#btn_img2img_physton" data-selector="#phystonPrompt_img2img_prompt" data-parent-selector="#tab_img2img" class="portal no-bg no-padding">
</div>
</div>
<div data-minSize="0" data-initSize="50" id="idyyfphi" class="split-container">
<div data-selector="#phystonPrompt_img2img_neg_prompt" data-parent-selector="#tab_img2img" class="portal no-bg no-padding">
</div>
</div>
</div>
</div>
</div>
<div id="img2img_results_mobile_tabitem_group" class="flexbox col mobile">
<div id="img2img_results_mobile_tabitem" mobile="#template-img2img-results" class="xtabs-item">
</div>
</div>
<div id="img2img_temp_tabitem_group" class="flexbox col hidden">
<div id="img2img_temp_tabitem" class="xtabs-item">
<div id="accordioni" class="accordion">
<div class="accordion-bar">
<span class="accordion-title">Prompts &amp; Styles</span>
<span class="accordion-icon">▼</span>
</div>
<div id="acc-ci" class="accordion-container">
</div>
</div>
<div data-selector="#tab_img2img" data-parent-selector="gradio-app" class="portal">
</div>
<div data-selector="#img2img_column_size .tab-nav" data-parent-selector="#tab_img2img" class="portal">
</div>
<div data-selector="#img2img_gallery_container" data-parent-selector="gradio-app" class="portal">
</div>
<div data-selector="#img2img_generation_info_button" data-parent-selector="gradio-app" class="portal">
</div>
<!--
<div data-selector="#img2img_extra_tabs" data-parent-selector="#tab_img2img" droppable="true" class="portal">
</div>
<div data-selector="#img2img_settings" data-parent-selector="#tab_img2img" class="portal">
</div>
-->
</div>
</div>
</div>
</div>
</div>
<div id="img2img_results_generate_tabitem_group" class="flexbox col panel no-grow mobile">
<div id="img2img_results_generate_tabitem" mobile="#img2img_generate_group" class="xtabs-item">
</div>
</div>
<!-- <div class="layout-footer">
<div class="xtabs-tabs row panel">
<button tabItemId="#img2img_temp_tabitem" tabGroup="img2img" class="xtabs-tab">
<div class="mask-icon icon-bug">
</div>
</button>
</div>
</div> -->
</div>

65
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-img2img-results.html Normal file
View File

@@ -0,0 +1,65 @@
<div id="flexbox-61" class="flexbox col full-height border-padding">
<div id="portal-212" data-selector="#img2img_gallery" data-parent-selector="#tab_img2img" class="portal full-height no-br" droppable="true">
<div class="flexbox col progress-flex">
<div data-selector="#img2img_gallery_container" data-parent-selector="gradio-app" class="portal"></div>
</div>
</div>
<div id="accordion-33" iconTrigger="#info_icon_btn_img2img" class="accordion no-tr">
<div class="accordion-bar no-tr">
<div id="flexbox-294" class="flexbox row center">
<button id="info_icon_btn_img2img" toggle="true" class="ae-button">
<div id="info_icon" class="mask-icon icon-info">
</div>
</button>
<button id="ae-button-27" class="ae-button">
<div id="portal-5" data-selector="#img2img_open_folder" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible">
<div id="mask-icon-39" class="mask-icon icon-folder">
</div>
</div>
</button>
<button id="ae-button-38" class="ae-button">
<div id="portal-10" data-selector="#save_img2img" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible">
<div id="mask-icon-40" class="mask-icon icon-save">
</div>
</div>
</button>
<button id="ae-button-49" class="ae-button">
<div id="portal-11" data-selector="#save_zip_img2img" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible">
<div id="mask-icon-41" class="mask-icon icon-zip">
</div>
</div>
</button>
<button id="ae-button-60" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="portal-12" data-selector="#img2img_send_to_inpaint" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible">
<div id="mask-icon-42" class="mask-icon icon-2inpaint">
</div>
</div>
</button>
<button id="ae-button-51" class="ae-button" data-click="#extras_nav">
<div id="portal-13" data-selector="#img2img_send_to_extras" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible">
<div id="mask-icon-43" class="mask-icon icon-2extras">
</div>
</div>
</button>
<button id="ae-button-72" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="portal-14" data-selector="#img2img_send_to_img2img" data-parent-selector="#tab_img2img" droppable="true" class="portal invisible">
<div id="mask-icon-44" class="mask-icon icon-2img2img">
</div>
</div>
</button>
</div>
</div>
<div id="acc-c-33" class="accordion-container info-results-container">
<div id="flexbox-43" class="flexbox col">
<div id="portal-293" data-parent-selector="#tab_img2img" data-selector="#download_files_img2img" data-vis="true" class="portal shrink hide-empty">
</div>
<div id="portal-303" data-parent-selector="#tab_img2img" data-selector="#html_info_img2img" data-vis="true" class="portal hide-empty">
</div>
<div id="portal-313" data-parent-selector="#tab_img2img" data-selector="#html_log_img2img" data-vis="true" class="portal hide-empty">
</div>
</div>
</div>
</div>
</div>

129
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-model-merger.html Normal file
View File

@@ -0,0 +1,129 @@
<div id="layout-model-merger" class="layout">
<div class="layout-header panel no-br">
<button id="ae-button-8" class="ae-button">
<div id="portal" data-selector="#modelmerger_merge" data-parent-selector="#tab_modelmerger" droppable="true" class="portal no-bg shrink invisible">
<div id="mask-icon-8" class="mask-icon icon-generate">
</div>
<span>Merge models</span>
</div>
</button>
</div>
<div id="i0sfvmm" class="layout-content">
<div id="xtabmm" class="xtabs panel no-tr no-br no-padding">
<div id="xtabs-itemsmm" class="xtabs-items">
<div id="modelmerger_params_tabitem_group" class="flexbox col">
<div id="modelmerger_params_tabitem" class="xtabs-item">
<div id="flexbox-27m" class="flexbox col">
<div id="portal-781ad" data-selector="#modelmerger_interp_description" data-parent-selector="#tab_modelmerger" class="portal">
</div>
<div id="flexbox-227mvn" class="flexbox row">
<div id="flexbox-227a" class="flexbox no-border min-width fb-50 row">
<div id="portal-678a" data-parent-selector="#tab_modelmerger" data-selector="#modelmerger_primary_model_name" class="portal no-min-width">
</div>
<div id="portal-689a" data-parent-selector="#tab_modelmerger" data-selector="#refresh_checkpoint_A" droppable="true" class="portal shrink invisible">
<div id="mask-icon-166a" class="mask-icon refresh">
</div>
</div>
</div>
<div id="flexbox-227b" class="flexbox no-border min-width fb-50 row">
<div id="portal-678b" data-parent-selector="#tab_modelmerger" data-selector="#modelmerger_secondary_model_name" class="portal no-min-width">
</div>
<div id="portal-689b" data-parent-selector="#tab_modelmerger" data-selector="#refresh_checkpoint_B" droppable="true" class="portal shrink invisible">
<div id="mask-icon-166b" class="mask-icon refresh">
</div>
</div>
</div>
<div id="flexbox-227c" class="flexbox no-border min-width fb-50 row">
<div id="portal-678c" data-parent-selector="#tab_modelmerger" data-selector="#modelmerger_tertiary_model_name" class="portal no-min-width">
</div>
<div id="portal-689c" data-parent-selector="#tab_modelmerger" data-selector="#refresh_checkpoint_C" droppable="true" class="portal shrink invisible">
<div id="mask-icon-166c" class="mask-icon refresh">
</div>
</div>
</div>
</div>
<div id="portal-781am" data-selector="#modelmerger_custom_name" data-parent-selector="#tab_modelmerger" class="portal">
</div>
<div id="portal-782am" data-selector="#modelmerger_interp_amount" data-parent-selector="#tab_modelmerger" class="portal">
</div>
<div id="portal-783am" data-selector="#modelmerger_interp_method" data-parent-selector="#tab_modelmerger" class="portal">
</div>
<div id="flexbox-227m" class="flexbox row">
<div id="portal-784am" data-selector="#modelmerger_checkpoint_format" data-parent-selector="#tab_modelmerger" class="portal min-width">
</div>
<div id="portal-785am" data-selector="#modelmerger_save_as_half" data-parent-selector="#tab_modelmerger" class="portal">
</div>
</div>
<div id="flexbox-227mv" class="flexbox row">
<div id="portal-786am" data-selector="#modelmerger_config_method" data-parent-selector="#tab_modelmerger" class="portal min-width fb-50">
</div>
<div id="flexbox-227" class="flexbox no-border min-width fb-50 row">
<div id="portal-678" data-parent-selector="#tab_modelmerger" data-selector="#modelmerger_bake_in_vae" class="portal no-min-width">
</div>
<div id="portal-689" data-parent-selector="#tab_modelmerger" data-selector="#modelmerger_refresh_bake_in_vae" droppable="true" class="portal shrink invisible">
<div id="mask-icon-166u" class="mask-icon refresh">
</div>
</div>
</div>
</div>
<div id="portal-78amu1" data-selector="#modelmerger_discard_weights" data-parent-selector="#tab_modelmerger" class="portal">
</div>
<div id="portal-78amu3" data-selector="#tab_modelmerger .gradio-accordion" data-parent-selector="gradio-app" class="portal">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layout-footer">
<div class="xtabs-tabs row panel no-tr">
<div id="portal-78amu2" data-selector="#modelmerger_results_container" data-parent-selector="#tab_modelmerger" class="portal">
</div>
</div>
</div>
</div>

49
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-pnginfo.html Normal file
View File

@@ -0,0 +1,49 @@
<div id="layout-pnginfo-group" class="flexbox col">
<div id="layout-pnginfo" class="layout">
<div class="layout-header">
<div id="pnginfo_send_buttons" class="flexbox row panel icons-bar center no-padding">
<button id="pnginfo_send_txt2img" class="ae-button" data-click="#txt2img_nav, #txt2img_params">
<div data-selector="#txt2img_tab" data-parent-selector="#tab_pnginfo" droppable="true" class="portal invisible">
<div id="icon-2" class="mask-icon icon-2txt2img">
</div>
</div>
</button>
<button id="pnginfo_send_img2img" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div data-selector="#img2img_tab" data-parent-selector="#tab_pnginfo" droppable="true" class="portal invisible">
<div id="mask-icon-45" class="mask-icon icon-2img2img">
</div>
</div>
</button>
<button id="pnginfo_send_inpaint" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div data-selector="#inpaint_tab" data-parent-selector="#tab_pnginfo" droppable="true" class="portal invisible">
<div id="icon-9" class="mask-icon icon-2inpaint">
</div>
</div>
</button>
<button id="pnginfo_send_extras" class="ae-button" data-click="#extras_nav">
<div data-selector="#extras_tab" data-parent-selector="#tab_pnginfo" droppable="true" class="portal invisible">
<div id="icon-8" class="mask-icon icon-2extras">
</div>
</div>
</button>
</div>
</div>
<div class="layout-content">
<div id="png_info_tabitem" class="xtabs-item full-height no-padding">
<div id="split-4" direction="vertical" gutterSize="8" class="split">
<div data-minSize="0" data-initSize="50" id="ipp8cu" class="split-container">
<div id="portal-8" data-selector="#pnginfo_image" data-parent-selector="#tab_pnginfo" class="portal full-height object-fit no-padding-one no-bg">
</div>
</div>
<div data-minSize="0" data-initSize="50" id="iskes7" class="split-container">
<div data-selector="#tab_pnginfo textarea" data-parent-selector="gradio-app" class="portal full-height no-padding-one no-bg">
</div>
<div data-selector="#tab_pnginfo .panel > .form + div.block.gradio-html" data-parent-selector="gradio-app" class="portal full-height no-padding-one no-bg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

21
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-quicksettings.html Normal file
View File

@@ -0,0 +1,21 @@
<div id="layout-quicksettings-group" class="flexbox col">
<div id="layout-quicksettings" class="layout">
<div class="layout-header">
</div>
<div class="layout-content">
<div id="quicksettings_tabitem" class="xtabs-item">
<div id="portal-4" data-selector="#quicksettings" data-parent-selector="gradio-app" class="portal">
</div>
</div>
</div>
<div class="layout-footer">
</div>
</div>
</div>

35
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-settings.html Normal file
View File

@@ -0,0 +1,35 @@
<div id="layout-settings-group" class="flexbox col">
<div id="layout-settings" class="layout">
<div class="layout-header">
<div class="flexbox row no-border no-br">
<div data-selector="#settings_show_all_pages" data-parent-selector="#tab_settings" class="portal no-padding">
</div>
<div data-selector="#settings_restart_gradio" data-parent-selector="#tab_settings" class="portal">
</div>
<div data-selector="#settings_submit" data-parent-selector="#tab_settings" class="portal">
</div>
</div>
<div data-selector="#settings_result" data-parent-selector="#tab_settings" data-vis="true" class="portal no-br no-tr hide-empty">
</div>
</div>
<div class="layout-content">
<div id="split-settings" direction="horizontal" gutterSize="8" class="split panel no-tr">
<div data-minSize="0" data-initSize="10" id="split-settings-left" class="split-container no-drag">
<div data-selector="#tab_settings .tab-nav" data-parent-selector="gradio-app" class="portal settings-tabs no-padding no-bg">
</div>
</div>
<div data-minSize="0" data-initSize="90" id="split-settings-right" class="split-container no-drag">
<div class="xtabs-item">
<div data-selector="#tab_settings > div" data-parent-selector="gradio-app" class="portal no-padding">
</div>
</div>
</div>
</div>
</div>
<!--
<div class="layout-footer">
</div> -->
</div>
</div>

13
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-sponsors.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="flexbox col padding lrp-32">
<div class="flexbox row lcol">
<div class="flexbox col">
<h2>
💎 Sponsors
</h2>
<h2>
🥇 Supporters
</h2>
</div>
</div>
</div>

82
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-styles-db.html Normal file
View File

@@ -0,0 +1,82 @@
<div id="layout_db_{{template_key}}" class="layout no-padding-one layout-extra-networks">
<div class="flexbox row padding flex-start group-row">
<button id="{{template_key}}_show-dirs" toggle="true" class="ae-button shrink show-dirs">
<div class="mask-icon icon-node-tree"></div>
</button>
<button class="ae-button shrink create-style">
<div class="mask-icon icon-create-new"></div>
</button>
<input id="{{template_key}}_search" type="text" placeholder="Search..">
<button id="{{template_key}}_clear" class="ae-button shrink">
<div class="mask-icon icon-cancel"></div>
</button>
<select id="{{template_key}}_search_in">
<option selected value="filename">Path</option>
<option value="prompt">Prompt</option>
<option value="negative">Negative Prompt</option>
<option value="description">Description</option>
<option value="tags">Tags</option>
</select>
<select id="{{template_key}}_sd_version">
<option selected value="">All</option>
<option value="SD1">SD1</option>
<option value="SD2">SD2</option>
<option value="SD3">SD3</option>
<option value="SDXL">SDXL</option>
<option value="PONY">PONY</option>
<option value="FLUX">FLUX</option>
<option value="Unknown">Unknown</option>
</select>
<select id="{{template_key}}_sort">
<option selected value="id">Default Sort</option>
<option value="name">Name</option>
<option value="filename">Path</option>
<option value="date_created">Date Created</option>
<option value="date_modified">Date Modified</option>
</select>
<button id="{{template_key}}_order" toggle="true" class="ae-button shrink reverse-order">
<div class="mask-icon icon-sort"></div>
</button>
<button id="{{template_key}}_refresh" class="ae-button shrink reverse-order">
<div class="mask-icon refresh"></div>
</button>
<button title="Rebuild thumbnails" id="{{template_key}}_rebuild" class="ae-button shrink reverse-order">
<div class="mask-icon icon-rebuild-thumbs"></div>
</button>
<button title="Settings" toggle="true" tabItemId="#{{template_key}}_settings_db" class="xtabs-tab">
<div class="mask-icon icon-settings"></div>
</button>
</div>
<div id="{{template_key}}_aside_split_db" direction="horizontal" gutterSize="8" class="split">
<div id="{{template_key}}_aside_db" data-minSize="0" data-initSize="0" class="split-container exnet-left no-drag">
<div class="layout">
<div class="layout-content">
<div id="{{template_key}}_tree_view" class="tree-view-container">
</div>
</div>
</div>
</div>
<div id="{{template_key}}_main_db" data-minSize="0" data-initSize="100" class="split-container exnet-right no-drag">
<div class="layout no-top-padding">
<div class="layout-header flexbox col relative">
<div id="{{template_key}}_settings_db" class="extra-network-settings flexbox col panel relative">
<div class="flexbox row">
<div data-selector="#setting_uiux_exnet_aspect_ratio_x" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_aspect_ratio_y" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_fit_size" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_header_size" data-parent-selector="gradio-app" class="portal dynamic"></div>
<div data-selector="#setting_uiux_exnet_image_tint" data-parent-selector="gradio-app" class="portal dynamic"></div>
<button class="ae-button shrink" data-click="#settings_submit">
<div class="mask-icon icon-save"></div>
</button>
</div>
</div>
</div>
<div class="layout-content no-top-padding">
<div id="{{template_key}}_cardholder" class="ae-virtual-cardholder"></div>
</div>
</div>
</div>
</div>
</div>

22
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-theme.html Normal file
View File

@@ -0,0 +1,22 @@
<div id="layout-theme-group" class="flexbox col">
<div id="layout-theme" class="layout">
<div class="layout-header">
<div id="flexbox-1011" class="flexbox row panel no-padding">
<div id="portal-8811" data-selector="#tab_ui_theme .svelte-vt1mxs" data-parent-selector="gradio-app" class="portal full-height object-fit no-padding-one no-bg">
</div>
</div>
</div>
<div class="layout-content">
<div id="theme_tabitem" class="xtabs-item full-height no-padding">
<div id="portal-theme" data-selector="#theme_overflow_container" data-parent-selector="#tab_ui_theme" class="portal full-height object-fit no-padding-one no-bg">
</div>
</div>
</div>
</div>
</div>

43
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-train-params.html Normal file
View File

@@ -0,0 +1,43 @@
<div id="layout-train" class="layout">
<div class="layout-header">
<div class="flexbox row shrink panel padding no-br">
<div id="train_header" class="flexbox row no-wrap shrink no-labels flex-start group-row">
<button title="Parameters" tabItemId="#train_params_tabitem" tabGroup="train" id="train_params" active="true" class="xtabs-tab shrink">
<div class="mask-icon icon-equalize">
</div>
<span>Params</span>
</button>
<button title="train Results" tabItemId="#train_results_mobile_tabitem" tabGroup="train" id="train_results_mobile" class="xtabs-tab mobile">
<div class="mask-icon icon-results">
</div>
<span>Results</span>
</button>
</div>
</div>
</div>
<div class="layout-content">
<div class="xtabs panel auto no-tr">
<div class="flexbox col shrink">
<div id="train_params_tabitem_group" class="flexbox col no-padding">
<div id="train_params_tabitem" class="xtabs-item">
<div data-parent-selector="gradio-app" data-selector="#tab_train > div" class="portal no-bg">
</div>
</div>
</div>
<div id="train_results_mobile_tabitem_group" class="flexbox col mobile">
<div id="train_results_mobile_tabitem" mobile="#template-train-results" class="xtabs-item">
</div>
</div>
</div>
</div>
</div>
<div class="layout-footer hidden">
<div class="xtabs-tabs row panel">
<div id="portal-40ee" data-parent-selector="gradio-app" data-selector="#tab_train" class="portal">
</div>
</div>
</div>
</div>

12
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-train-results.html Normal file
View File

@@ -0,0 +1,12 @@
<div id="flexbox-61t" class="flexbox col full-height border-padding">
<div id="portal-212t" data-selector="#ti_gallery" data-parent-selector="#tab_train" class="portal full-height no-br">
</div>
<div class="flexbox col panel shrink no-tr">
<div id="portal-212t1" data-selector="#ti_output" data-parent-selector="#tab_train" class="portal">
</div>
<div id="portal-212t2" data-selector="#ti_progress" data-parent-selector="#tab_train" class="portal">
</div>
<div id="portal-212t3" data-selector="#ti_error" data-parent-selector="#tab_train" class="portal">
</div>
</div>
</div>

323
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-txt2img-params.html Normal file
View File

@@ -0,0 +1,323 @@
<div id="layout-txt2img" class="layout">
<div class="layout-header">
<div id="txt2img_header_panel" class="flexbox row shrink panel padding no-br">
<div id="txt2img_header" class="flexbox row no-wrap shrink no-labels flex-start group-row">
<button title="Prompts" tabItemId="#txt2img_prompts_tabitem" tabGroup="txt2img" id="txt2img_prompts" active="true" class="xtabs-tab shrink">
<div class="mask-icon icon-prompt">
</div>
<span>Prompts</span>
</button>
<button title="Prompts" tabItemId="#txt2img_phystonPrompt_tabitem" tabGroup="txt2img" id="btn_txt2img_physton" class="xtabs-tab shrink hidden">
<div class="mask-icon icon-physton">
</div>
<span>Physton</span>
</button>
<button title="Parameters" tabItemId="#txt2img_params_tabitem" tabGroup="txt2img" id="txt2img_params" class="xtabs-tab shrink">
<div class="mask-icon icon-equalize">
</div>
<span>Params</span>
</button>
<button title="Scripts / Extensions" tabItemId="#txt2img_scripts_tabitem" tabGroup="txt2img" id="txt2img_scripts" class="xtabs-tab">
<div class="mask-icon icon-scripts">
</div>
<span>Scripts</span>
</button>
<button title="txt2img Results" tabItemId="#txt2img_results_mobile_tabitem" tabGroup="txt2img" id="txt2img_results_mobile" class="xtabs-tab mobile">
<div class="mask-icon icon-results">
</div>
<span>Results</span>
</button>
<!-- <button tabItemId="#txt2img_temp_tabitem" tabGroup="txt2img" class="xtabs-tab">
<div class="mask-icon icon-bug">
</div>
</button> -->
</div>
<div id="txt2img_generate_group" class="flexbox row flex-end group-row">
<div title="Skip" data-selector="#txt2img_skip" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible shrink no-bg no-padding-one disable">
<div class="mask-icon icon-skip">
</div>
</div>
<div title="Interrupt" data-selector="#txt2img_interrupt" data-parent-selector="#tab_txt2img" droppable="true"
class="portal invisible shrink no-bg no-padding-one disable">
<div class="mask-icon icon-stop">
</div>
</div>
<button title="Generate" class="ae-button generate">
<div data-selector="#txt2img_generate" data-parent-selector="#tab_txt2img" droppable="true" class="portal no-bg shrink invisible">
<div class="mask-icon icon-generate">
</div>
<span>Generate</span>
</div>
</button>
<button title="Generate forever" id="txt2img_loop" toggle="true" class="ae-button shrink">
<div id="mask-icon-loop" class="mask-icon icon-loop">
</div>
</button>
</div>
</div>
</div>
<div class="layout-content">
<div class="xtabs panel no-tr no-padding">
<div class="xtabs-items">
<div id="txt2img_prompts_tabitem_group" class="flexbox col">
<div id="txt2img_prompts_tabitem" class="xtabs-item">
<div class="layout">
<div class="layout-header">
<div class="flexbox no-padding row">
<div class="flexbox no-border no-bg shrink row">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_tools #paste" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-magic">
</div>
</div>
<div data-parent-selector="#txt2img_tools" data-selector="#txt2img_clear_prompt" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-delete">
</div>
</div>
</div>
<div class="flexbox no-border no-bg row">
<div data-parent-selector="#txt2img_styles_row" data-selector="#txt2img_styles" class="portal no-min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_styles_edit_button" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-styles-edit">
</div>
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_style_apply" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-styles-apply">
</div>
</div>
</div>
</div>
</div>
<div class="layout-content">
<div class="flexbox col">
<div id="split-2" direction="vertical" gutterSize="8" class="split">
<div data-minSize="0" data-initSize="50" id="iubsl" class="split-container">
<div class="layout no-padding">
<!-- <div class="layout-header">
</div> -->
<div class="layout-content relative">
<div data-selector="#txt2img_prompt" data-parent-selector="#tab_txt2img" class="portal no-bg" >
</div>
</div>
<div class="layout-footer">
<div data-parent-selector="#txt2img_prompt" data-selector="#txt2img_token_counter.block" class="portal relative token_counter" data-timeout="1000">
</div>
</div>
</div>
</div>
<div data-minSize="0" data-initSize="50" id="idyyf" class="split-container">
<div class="layout no-padding">
<!-- <div class="layout-header">
</div> -->
<div class="layout-content relative">
<div data-selector="#txt2img_neg_prompt" data-parent-selector="#tab_txt2img" class="portal no-bg" >
</div>
</div>
<div class="layout-footer">
<div data-parent-selector="#txt2img_neg_prompt" data-selector="#txt2img_negative_token_counter.block" data-timeout="1000"
class="portal relative token_counter">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="layout-footer panel shrink">
<div class="flexbox row">
</div>
</div>
</div>
-->
</div>
</div>
<div id="txt2img_params_tabitem_group" class="flexbox col">
<div id="txt2img_params_tabitem" class="xtabs-item">
<div class="flexbox col shrink auto-scroll">
<div class="flexbox row wrap">
<div class="flexbox row no-wrap group fb-60">
<div class="flexbox col">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_width" class="portal">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_height" class="portal">
</div>
</div>
<div class="flexbox unset-min-width shrink col center panel">
<div data-selector="#txt2img_res_switch_btn" data-parent-selector="#tab_txt2img" droppable="true"
class="portal invisible tool">
<div class="mask-icon icon-res-switch">
</div>
</div>
<div data-selector="#txt2img_dimensions_row" data-parent-selector="#tab_img2img" class="portal invisible tool">
</div>
</div>
</div>
<div class="flexbox group col fb-40">
<!-- <div id="flexbox-14w" class="flexbox row"> -->
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_batch_size" class="portal">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_batch_count" class="portal">
<!-- </div> -->
</div>
</div>
</div>
<div class="flexbox group row">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_sampling" class="portal min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_scheduler" class="portal min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_distilled_cfg_scale" class="portal min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_cfg_scale" class="portal min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_steps" class="portal min-width">
</div>
</div>
<div class="flexbox group col">
<div class="flexbox row">
<div class="flexbox no-border row">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_seed" class="portal no-min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_random_seed" droppable="true"
class="portal invisible shrink">
<div class="mask-icon icon-dice">
</div>
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_reuse_seed" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-recycle">
</div>
</div>
<button toggle="true" class="ae-button shrink toggle-seed">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_subseed_show" droppable="true"
class="portal shrink invisible tool">
<div class="mask-icon icon-equalize">
</div>
</div>
</button>
</div>
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_seed_extras" droppable="true" class="portal sub-group">
<div class="flexbox col">
<div class="flexbox row">
<div class="flexbox no-border min-width fb-50 row">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_subseed" class="portal no-min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_random_subseed" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-dice">
</div>
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_reuse_subseed" droppable="true"
class="portal shrink invisible">
<div class="mask-icon icon-recycle">
</div>
</div>
</div>
<div class="flexbox row fb-50">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_subseed_strength"
class="portal min-width fb-50">
</div>
</div>
</div>
<div class="flexbox row wrap">
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_seed_resize_from_w" class="portal min-width">
</div>
<div data-parent-selector="#tab_txt2img" data-selector="#txt2img_seed_resize_from_h" class="portal min-width">
</div>
</div>
</div>
</div>
</div>
<div data-selector="#txt2img_enable" data-parent-selector="#tab_txt2img" class="portal">
</div>
<div data-selector="#txt2img_hr" data-parent-selector="#tab_txt2img" class="portal">
</div>
<div class="flexbox group row">
<div data-selector="#txt2img_override_settings" data-parent-selector="#tab_txt2img" class="portal">
</div>
</div>
<div data-selector="#layout-txt2img .gradio-accordion:has( div[id^='setting_'])" data-parent-selector="gradio-app"
class="portal hide-empty">
</div>
<div data-selector="#txt2img_container_aspect_ratio" data-parent-selector="#tab_txt2img" class="portal hide-empty">
</div>
</div>
</div>
</div>
<div id="txt2img_scripts_tabitem_group" class="flexbox col">
<div id="txt2img_scripts_tabitem" class="xtabs-item">
<div data-selector="#txt2img_script_container" data-parent-selector="#tab_txt2img" class="portal no-bg">
</div>
</div>
</div>
<div id="txt2img_phystonPrompt_tabitem_group" class="flexbox col">
<div id="txt2img_phystonPrompt_tabitem" class="xtabs-item">
<div id="split-physton" direction="vertical" gutterSize="8" class="split">
<div data-minSize="0" data-initSize="50" id="iubslph" class="split-container">
<div show-button="#btn_txt2img_physton" data-selector="#phystonPrompt_txt2img_prompt" data-parent-selector="#tab_txt2img" class="portal no-bg no-padding">
</div>
</div>
<div data-minSize="0" data-initSize="50" id="idyyfph" class="split-container">
<div data-selector="#phystonPrompt_txt2img_neg_prompt" data-parent-selector="#tab_txt2img" class="portal no-bg no-padding">
</div>
</div>
</div>
</div>
</div>
<div id="txt2img_results_mobile_tabitem_group" class="flexbox col mobile">
<div id="txt2img_results_mobile_tabitem" mobile="#template-txt2img-results" class="xtabs-item">
</div>
</div>
<div id="txt2img_temp_tabitem_group" class="flexbox col hidden">
<div id="txt2img_temp_tabitem" class="xtabs-item">
<div data-selector="#tab_txt2img" data-parent-selector="gradio-app" class="portal">
</div>
<div data-selector="#txt2img_generation_info_button" data-parent-selector="gradio-app" class="portal">
</div>
<!-- <svg id="animated" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#FDB900"/>
<path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg> -->
<!-- <div id="portal-7456" data-selector="#tab_txt2img" data-parent-selector="gradio-app" class="portal">
</div> -->
<!-- <div id="portal-48" data-selector="#txt2img_extra_tabs" data-parent-selector="#tab_txt2img" droppable="true" class="portal">
</div> -->
</div>
</div>
</div>
</div>
</div>
<div id="txt2img_results_generate_tabitem_group" class="flexbox col panel no-grow mobile">
<div id="txt2img_results_generate_tabitem" mobile="#txt2img_generate_group" class="xtabs-item">
</div>
</div>
<!--
<div class="layout-footer">
<div class="xtabs-tabs row panel no-tr">
</div>
</div>
-->
</div>
</div>

74
extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-txt2img-results.html Normal file
View File

@@ -0,0 +1,74 @@
<div id="flexbox-6" class="flexbox col full-height border-padding">
<div id="portal-21" data-selector="#txt2img_gallery" data-parent-selector="#tab_txt2img" class="portal full-height no-br" droppable="true">
<div class="flexbox col progress-flex">
<div data-selector="#txt2img_gallery_container" data-parent-selector="gradio-app" class="portal"></div>
</div>
</div>
<div id="accordion-3" iconTrigger="#info_icon_btn" class="accordion no-tr">
<div class="accordion-bar no-tr">
<div id="flexbox-29" class="flexbox row center">
<button id="info_icon_btn" toggle="true" class="ae-button">
<div id="info_icon" class="mask-icon icon-info">
</div>
</button>
<button id="ae-button-2" class="ae-button">
<div id="portal-5" data-selector="#txt2img_open_folder" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-39" class="mask-icon icon-folder">
</div>
</div>
</button>
<button id="ae-button-3" class="ae-button">
<div id="portal-10" data-selector="#save_txt2img" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-40" class="mask-icon icon-save">
</div>
</div>
</button>
<button id="ae-button-4" class="ae-button">
<div id="portal-11" data-selector="#save_zip_txt2img" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-41" class="mask-icon icon-zip">
</div>
</div>
</button>
<button id="ae-button-6" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="portal-12" data-selector="#txt2img_send_to_inpaint" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-42" class="mask-icon icon-2inpaint">
</div>
</div>
</button>
<button id="ae-button-5" class="ae-button" data-click="#extras_nav">
<div id="portal-13" data-selector="#txt2img_send_to_extras" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-43" class="mask-icon icon-2extras">
</div>
</div>
</button>
<button id="ae-button-7" class="ae-button" data-click="#img2img_nav, #img2img_params">
<div id="portal-14" data-selector="#txt2img_send_to_img2img" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-44" class="mask-icon icon-2img2img">
</div>
</div>
</button>
<button id="ae-button-8" class="ae-button">
<div id="portal-15" data-selector="#txt2img_upscale" data-parent-selector="#tab_txt2img" droppable="true" class="portal invisible">
<div id="mask-icon-45" class="mask-icon icon-2extras">
</div>
</div>
</button>
</div>
</div>
<div id="acc-c-3" class="accordion-container info-results-container">
<div id="flexbox-4" class="flexbox col">
<div id="portal-29" data-parent-selector="#tab_txt2img" data-selector="#download_files_txt2img" data-vis="true" class="portal shrink hide-empty">
</div>
<div id="portal-30" data-parent-selector="#tab_txt2img" data-selector="#html_info_txt2img" data-vis="true" class="portal hide-empty">
</div>
<div id="portal-31" data-parent-selector="#tab_txt2img" data-selector="#html_log_txt2img" data-vis="true" class="portal hide-empty">
</div>
</div>
</div>
</div>
</div>

49
extensions-builtin/sd-webui-ux/assets/templates/uiux-gradio-3/template-about-extension.html
View File

@@ -4,26 +4,14 @@
<h2>Anapnoe UI-UX Core</h2>
<div class="column-1">
<p>
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, utilizing the powerful
<a href="https://www.gradio.app/" target="_blank">Gradio</a>
library. This cutting-edge browser interface offers an unparalleled level of customization and optimization for users, setting it apart from other web interfaces.
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
</p>
<p>
This extension is compatible with both backends:
<a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui" target="_blank">Stable Diffusion web UI</a>
and
<a href="https://github.com/lllyasviel/stable-diffusion-webui-forge" target="_blank">Stable Diffusion web UI Forge</a>
.
Compatible with both <a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui" target="_blank">Stable Diffusion web UI</a>
and <a href="https://github.com/lllyasviel/stable-diffusion-webui-forge" target="_blank">Stable Diffusion web UI Forge</a> backends.
</p>
<p>
Please note that this extension focuses solely on frontend optimizations to significantly reduce DOM memory usage and improve loading speed. In contrast, the
<a href="https://github.com/anapnoe/stable-diffusion-webui-ux" target="_blank">Stable Diffusion web UI UX</a>
and its variant,
<a href="https://github.com/anapnoe/stable-diffusion-webui-ux-forge" target="_blank">Stable Diffusion web UI UX Forge</a>
, incorporate backend optimizations for an even better and faster user experience. Together, these changes ensure a more effective and enjoyable interaction with the application.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Your Support Makes a Difference! 🌟</a>
This extension performs frontend optimizations <b>post-DOM load</b> (modifying elements after they're created), meaning developer tools may show initial resource allocation before optimizations apply. In contrast <a href="https://github.com/anapnoe/stable-diffusion-webui-ux" target="_blank">Stable Diffusion web UI UX</a> & <a href="https://github.com/anapnoe/stable-diffusion-webui-ux-forge" target="_blank">Stable Diffusion web UI UX Forge</a> implement <b>upstream backend optimizations</b> that prevent unnecessary element creation entirely, enabling faster performance from initialization.
</p>
</div>
</div>
@@ -40,28 +28,7 @@
without any compromise
from advertisements or corporate agendas, and ensure that it stays freely accessible, current, and
open to all.
<blockquote>
There is only so much time in a day that a person can otherwise give (Dave Glick).
</blockquote>
</p>
</div>
</div>
<div class="flexbox col">
<h2>
Sponsors & Supporters
</h2>
<div class="column-2">
<p>
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.
<blockquote>
<a style="font-weight:600;" href="https://buymeacoffee.com/dayanbayah" target="_blank">
Donate now, and join forces to
create a sustainable realm of open source software that benefits everyone.
</a>
</blockquote>
</p>
</p><a href="https://buymeacoffee.com/dayanbayah" target="_blank">💖 Your Support Makes a Difference! 💖</a>
</div>
</div>
</div>
@@ -79,7 +46,7 @@
allowing you to tailor-make workflows that cater to your specific needs.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">Get early access to Workspaces for UI-UX.</a>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Workspaces for UI-UX. 🌟</a>
</p>
<div class="about-image-container">
<img class="about-image-fade" alt="Anapnoe UI-UX Workspaces" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png" lazy="true">
@@ -97,7 +64,7 @@
Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">Get early access to Advanced Theme Style configurator for UI-UX.</a>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟</a>
</p>
<img alt="Anapnoe UI-UX Advanced Theme editor" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-theme-editor-advanced.png" lazy="true">
</div>
@@ -118,4 +85,4 @@
</div>
</div>
</div>
</div>
</div>

60
extensions-builtin/sd-webui-ux/assets/templates/uiux-gradio-3/template-about.html
View File

@@ -4,39 +4,8 @@
<h2>Anapnoe UI-UX Core</h2>
<div class="column-1">
<p>
Anapnoe UI-UX Core framework 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
<a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui" target="_blank">
Stable Diffusion
web UI
</a>
and the
<a target="_blank" href="https://gradio.app">Gradio</a>
framework. These optimizations include:
A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
</p>
<ul>
<li>Streamline the backend by removing redundant checkpoints and “Extra Networks” (Textual Inversion, Lora, and Hypernetworks) from img2img to reduce duplicate images and event listeners.</li>
<li>Eliminate inline event listeners for “Extra Networks” cards and action buttons in the backend to enhance code maintainability and performance.</li>
<li>Implement an event delegation pattern to optimize code efficiency by consolidating event handling for “Extra Networks” cards and action buttons.</li>
<li>Replace all default Gradio stylesheets in the DOM with an optimized version to improve visual consistency across components.</li>
<li>Remove inline styles and Svelte classes from the DOM to declutter and enhance performance.</li>
</ul>
<p>
The current optimizations significantly reduce DOM memory usage and improve loading speed.
</br>
Nevertheless, there is still potential for further enhancements, which will be explored in
upcoming releases of the
<a href="https://github.com/anapnoe/stable-diffusion-webui-ux" target="_blank">
Stable Diffusion Web
UI-UX
</a>.
</p>
<!-- <br>
<img alt="Anapnoe UI-UX default theme" src="./file=extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-ui-ux.png" lazy="true"/>
-->
</div>
</div>
<div class="flexbox col">
@@ -52,28 +21,7 @@
without any compromise
from advertisements or corporate agendas, and ensure that it stays freely accessible, current, and
open to all.
<blockquote>
There is only so much time in a day that a person can otherwise give (Dave Glick).
</blockquote>
</p>
</div>
</div>
<div class="flexbox col">
<h2>
Sponsors & Supporters
</h2>
<div class="column-2">
<p>
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.
<blockquote>
<a style="font-weight:600;" href="https://buymeacoffee.com/dayanbayah" target="_blank">
Donate now, and join forces to
create a sustainable realm of open source software that benefits everyone.
</a>
</blockquote>
</p>
</p><a href="https://buymeacoffee.com/dayanbayah" target="_blank">💖 Your Support Makes a Difference! 💖</a>
</div>
</div>
</div>
@@ -91,7 +39,7 @@
allowing you to tailor-make workflows that cater to your specific needs.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">Get early access to Workspaces for UI-UX.</a>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Workspaces for UI-UX. 🌟</a>
</p>
<div class="about-image-container">
<img class="about-image-fade" alt="Anapnoe UI-UX Workspaces" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png" lazy="true">
@@ -109,7 +57,7 @@
Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
</p>
<p>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">Get early access to Advanced Theme Style configurator for UI-UX.</a>
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟</a>
</p>
<img alt="Anapnoe UI-UX Advanced Theme editor" data-src="./file=extensions/sd-webui-ux/assets/images/anapnoe-ui-ux-theme-editor-advanced.png" lazy="true">
</div>

2
extensions-builtin/sd-webui-ux/assets/templates/uiux-gradio-3/template-app-root.html
View File

@@ -66,7 +66,7 @@
</div>
<div id="sponsors_tabitem_parent">
<div title="Sponsors & Supporters" id="sponsors_tabitem" class="xtabs-item no-padding">
<div id="template-sponsors" class="template"></div>
<!--<div id="template-sponsors" class="template"></div>-->
</div>
</div>
<div id="contributors_tabitem_parent">

89
extensions-builtin/sd-webui-ux/assets/templates/uiux-gradio-3/template-aside-extra-networks.html
View File

@@ -11,7 +11,7 @@
</a>
</button>
<button class="ae-button">
<a title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux">
<a id="github-project-link" title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux">
<div class="mask-icon icon-github"></div>
<span>Github</span>
</a>
@@ -62,79 +62,64 @@
<span>Console Log</span>
</button>
</div>
<div id="sidebar_extra_networks" class="flexbox col shrink">
<button title="Checkpoints" tabItemId="#layout_txt2img_checkpoints" id="btn_checkpoints" tabGroup="extra_networks" data-click="#tab_txt2img" active="true" class="xtabs-tab">
<div id="sidebar_extra_networks_db" class="flexbox col shrink">
<button title="Checkpoints" id="checkpoints_nav" tabItemId="#layout_db_checkpoints" tabGroup="extra_networks" class="xtabs-tab" active="true">
<div class="mask-icon icon-checkpoints"></div>
<span>Checkpoints</span>
</button>
<button title="Textual Inversion" tabItemId="#layout_txt2img_textual_inversion" id="btn_textual_inversion" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
<button title="Textual Inversion" id="textual_inversion_nav" tabItemId="#layout_db_textual_inversion" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-textual-inversion"></div>
<span>Textual Inversion</span>
</button>
<button title="Hypernetworks" tabItemId="#layout_txt2img_hypernetworks" id="btn_hypernetworks" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
<button title="LORA" id="lora_nav" tabItemId="#layout_db_lora" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-lora"></div>
<span>LORA</span>
</button>
<button title="Hypernetworks" id="hypernetwork_nav" tabItemId="#layout_db_hypernetworks" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-hypernetworks"></div>
<span>Hypernetworks</span>
</button>
<button title="Lora" tabItemId="#layout_txt2img_lora" id="btn_lora" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
<div class="mask-icon icon-lora"></div>
<span>Lora</span>
<button title="Styles" tabItemId="#layout_db_styles" tabGroup="extra_networks" id="sd_styles_nav" class="xtabs-tab hidden">
<div class="mask-icon icon-stylez"></div>
<span>Styles</span>
</button>
<button title="Images" tabItemId="#layout_db_output_images" tabGroup="extra_networks" id="sd_output_images_nav" class="xtabs-tab hidden">
<div class="mask-icon icon-gallery"></div>
<span>Browser</span>
</button>
<div class="flexbox col spacer-v"></div>
<!--
<button title="Stylez" tabItemId="#layout_stylez" id="btn_stylez" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
<div class="mask-icon icon-lora"></div>
<span>Stylez</span>
</button>
-->
<div id="civitai_explorer_nav" class="flexbox col hidden">
<button title="Civitai Images" id="civitai_nav_images" tabItemId="#civitai_images_tabitem" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-civitai-images"></div>
<span>Images</span>
</button>
<button title="Civitai Models" id="civitai_nav_models" tabItemId="#civitai_models_tabitem" tabGroup="extra_networks" class="xtabs-tab">
<div class="mask-icon icon-civitai-models"></div>
<span>Models</span>
</button>
<div class="flexbox col spacer-v"></div>
</div>
</div>
</div>
<div class="accordion-container">
<div template="template-extra-networks" key="txt2img_checkpoints" id="en_txt2img_checkpoints" class="template"></div>
<div template="template-extra-networks" key="txt2img_textual_inversion" id="en_txt2img_textual_inversion" class="template"></div>
<div template="template-extra-networks" key="txt2img_hypernetworks" id="en_txt2img_hypernetworks" class="template"></div>
<div template="template-extra-networks" key="txt2img_lora" id="en_txt2img_lora" class="template"></div>
<div id="template-pnginfo" class="template"></div>
<div id="template-quicksettings" class="template"></div>
<div id="template-extensions" class="template"></div>
<div id="template-settings" class="template"></div>
<div id="template-model-merger" class="template"></div>
<div id="template-console-log" class="template"></div>
<div id="template-civitai-explorer" class="template"></div>
<div template="template-extra-networks-db" key="checkpoints" id="exn_checkpoints" class="template"></div>
<div template="template-extra-networks-db" key="textual_inversion" id="exn_textual_inversion" class="template"></div>
<div template="template-extra-networks-db" key="hypernetworks" id="exn_hypernetworks" class="template"></div>
<div template="template-extra-networks-db" key="lora" id="exn_lora" class="template"></div>
<div id="layout-theme" class="flexbox col padding">
<div show-button="#btn_theme_editor" data-selector="[id^='tab_ui_theme'] > div" data-parent-selector="gradio-app" class="portal no-bg"></div>
</div>
<!--
<div id="layout-extra" class="layout no-padding">
<div class="layout-content xtabs">
<div template="template-extra-networks" key="txt2img_checkpoints" id="en_txt2img_checkpoints" class="template"></div>
<div template="template-extra-networks" key="txt2img_textual_inversion" id="en_txt2img_textual_inversion" class="template"></div>
<div template="template-extra-networks" key="txt2img_hypernetworks" id="en_txt2img_hypernetworks" class="template"></div>
<div template="template-extra-networks" key="txt2img_lora" id="en_txt2img_lora" class="template"></div>
<div id="template-pnginfo" class="template"></div>
<div id="template-quicksettings" class="template"></div>
<div id="template-extensions" class="template"></div>
<div id="template-settings" class="template"></div>
<div id="template-model-merger" class="template"></div>
<div id="template-console-log" class="template"></div>
<div id="layout-theme" class="flexbox col padding">
<div show-button="#btn_theme_editor" data-selector="[id^='tab_ui_theme'] > div" data-parent-selector="gradio-app" class="portal no-bg"></div>
</div>
</div>
<div class="layout-footer">
<div class="flexbox padding">
<div data-selector="#setting_uiux_exnet_aspect_ratio_x" data-parent-selector="gradio-app" class="portal"></div>
<div data-selector="#setting_uiux_exnet_aspect_ratio_y" data-parent-selector="gradio-app" class="portal"></div>
<div data-selector="#uiux_exnet_fit_size" data-parent-selector="gradio-app" class="portal"></div>
</div>
</div>
-->
<div id="template-styles-db" key="styles" id="sd_styles" class="template"></div>
<div id="template-styles-db" key="output_images" id="sd_output_images" class="template"></div>
</div>
<!--
<div id="template-stylez" class="template"></div>
-->
<!--
<div id="layout-stylez" class="flexbox col padding">
<div show-button="#btn_stylez" data-selector="#Stylez" data-parent-selector="gradio-app" class="portal no-bg"></div>
</div>
-->
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More