mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-04-09 10:11:46 +02:00
Version Update
This commit is contained in:
anapnoe
75
README.md
75
README.md
@@ -1,43 +1,58 @@
|
||||
# Stable Diffusion web UI-UX
|
||||
A bespoke, highly adaptable user interface for the Stable Diffusion, utilizing the powerful Gradio library. This cutting-edge browser interface offer an unparalleled level of customization and optimization for users, setting it apart from other web interfaces.
|
||||
# Stable Diffusion WebUI UX Forge
|
||||
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.
|
||||
|
||||
[🌟 Your Support Makes a Difference! 🌟](https://buymeacoffee.com/dayanbayah)
|
||||
|
||||
|
||||
|
||||
## Optimizations
|
||||
- Removing redundant Checkpoints and "Extra Networks" (Textual Inversion, Lora, and Hypernetworks) from img2img to reduce duplicated images and event listeners.
|
||||
- Eradicating inline event listeners from "Extra Networks" cards and action buttons.
|
||||
- Applying an event delegation pattern to further streamline the code by consolidating event handling for "Extra Networks" cards and action buttons.
|
||||
- Replacing all default Gradio stylesheets in the DOM with an optimized version that promote better visual coherence across components.
|
||||
- Eliminating inline styles and Svelte classes from the DOM to minimize clutter and improve efficiency.
|
||||
- **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.
|
||||
|
||||
## Features webui-ux
|
||||
- Mobile responsive design
|
||||
- A versatile micro-template engine that can be leveraged by other extensions
|
||||
- Customizable theme styles through a user-friendly configuration interface
|
||||
- Built-in console log
|
||||
- Option to ignore overrides
|
||||
- Support for tick marks on input range sliders for improved usability
|
||||
- Toggle option between slider and numeric input modes, ensuring a compact interface when numeric input mode is enabled
|
||||
- Seamless UI integration for the Infinite Image Browsing Extension
|
||||
- Seamless UI integration for the Deforum Extention
|
||||
## 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.
|
||||
- **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.
|
||||
- **Enhanced Usability for Sliders**: Input range sliders support tick marks for improved interaction.
|
||||
- **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.
|
||||
|
||||
## Workspaces UI-UX (work in progress)
|
||||
## Seamless UI Integration with Extensions
|
||||
- **Infinite Image Browsing Extension**
|
||||
- **Deforum Extension**
|
||||
- **Prompt-All-In-One Extension**
|
||||
- **Aspect-Ratio-Helper Extension**
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
|
||||
|
||||
|
||||
## Workspaces UI-UX (in progress)(upcoming feature)
|
||||
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)
|
||||
|
||||
[Become a supporter and get early access to Workspaces for UI-UX.](https://buymeacoffee.com/dayanbayah)
|
||||
|
||||
## Infinite image browsing integration
|
||||
Seamless integration with the [Infinite image browsing](https://github.com/zanllp/sd-webui-infinite-image-browsing) extension.
|
||||
|
||||
|
||||
|
||||
## Todo
|
||||
- Fullscreen Gallery Support
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
## SD Features
|
||||
[Detailed feature showcase with images](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Features):
|
||||
- Original txt2img and img2img modes
|
||||
- One click install and run script (but you still must install python and git)
|
||||
@@ -178,7 +193,7 @@ wget -q https://raw.githubusercontent.com/anapnoe/stable-diffusion-webui-ux/mast
|
||||
```
|
||||
Or just clone the repo wherever you want:
|
||||
```bash
|
||||
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
|
||||
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui-ux.git
|
||||
```
|
||||
|
||||
3. Run `webui.sh`.
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(205deg 83% 46%);--ae-secondary-color:hsl(325deg 83% 46%);--ae-main-bg-color:rgb(32 32 32);--ae-input-height:35px;--ae-input-slider-height:0.6;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:23px;--ae-label-color:rgba(255, 255, 255, 0.75);--ae-secondary-label-color:rgba(255, 255, 255, 0.5);--ae-input-border-size:2px;--ae-input-border-radius:0px;--ae-input-text-color:rgba(255, 255, 255, 0.75);--ae-input-placeholder-color:rgba(255, 255, 255, 0.35);--ae-input-bg-color:rgba(0, 0, 0, 0.25);--ae-input-border-color:rgba(0, 0, 0, 0.1);--ae-input-hover-text-color:rgba(255, 255, 255, 0.75);--ae-panel-bg-color:rgba(64, 64, 64, 0.5);--ae-panel-border-color:rgba(64, 64, 64, 0.75);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:2px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(0deg 0% 16%);--ae-group-padding:2px;--ae-group-radius:7px;--ae-group-border-size:2px;--ae-group-border-color:hsl(0deg 0% 16%);--ae-group-gap:6px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max( var(--ae-outside-gap-size), var(--ae-inside-padding-size) );--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(168deg 97% 41%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:24px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(216deg 5% 60%);--ae-input-border-size:0px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(216deg 5% 60%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(225deg 6% 13%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:2px;--ae-group-radius:0px;--ae-group-border-size:1px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:5px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max( var(--ae-outside-gap-size), var(--ae-inside-padding-size) );--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(0deg 0% 0%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 95%);--ae-input-height:28px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:16px;--ae-label-color:hsl(0deg 0% 15%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(0deg 0% 0%);--ae-input-placeholder-color:hsl(0deg 0% 89%);--ae-input-bg-color:hsl(0deg 100% 100%);--ae-input-border-color:hsl(0deg 0% 95%);--ae-input-hover-text-color:hsl(0deg 100% 100%);--ae-panel-bg-color:hsl(0deg 0% 98%);--ae-panel-border-color:hsl(0deg 0% 87%);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:0px;--ae-gap-size-val:3px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(0deg 0% 94%);--ae-group-padding:2px;--ae-group-radius:6px;--ae-group-border-size:0px;--ae-group-border-color:hsl(0deg 0% 94%);--ae-group-gap:2px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max( var(--ae-outside-gap-size), var(--ae-inside-padding-size) );--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(168deg 96% 42%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 8%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(0deg 0% 65%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:2px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(168deg 96% 42%);--ae-input-placeholder-color:hsl(168deg 96% 42%);--ae-input-bg-color:hsl(0deg 0% 10%);--ae-input-border-color:hsl(0deg 0% 10%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(0deg 0% 17%);--ae-panel-border-color:hsl(0deg 0% 17%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:2px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:2px;--ae-panel-border-radius:4px;--ae-subpanel-border-radius:4px;--ae-outside-gap-size:1px;--ae-inside-padding-size:5px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-mobile-outside-gap-size:3px;--ae-mobile-inside-padding-size:3px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(18deg 124% 42%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(210deg 28% 8%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(210deg 28% 65%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:2px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(18deg 100% 42%);--ae-input-placeholder-color:hsl(18deg 100% 42%);--ae-input-bg-color:hsl(210deg 28% 10%);--ae-input-border-color:hsl(210deg 28% 10%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(210deg 28% 17%);--ae-panel-border-color:hsl(210deg 28% 17%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:2px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:2px;--ae-panel-border-radius:4px;--ae-subpanel-border-radius:4px;--ae-outside-gap-size:4px;--ae-inside-padding-size:4px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-mobile-outside-gap-size:3px;--ae-mobile-inside-padding-size:3px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(222deg 75% 62%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(240deg 16% 6%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(185deg 66% 85%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:2px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(222deg 75% 62%);--ae-input-placeholder-color:hsl(222deg 75% 62%);--ae-input-bg-color:hsl(240deg 17% 8%);--ae-input-border-color:hsl(240deg 20% 16%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(240deg 18% 12%);--ae-panel-border-color:hsl(240deg 16% 16%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:2px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:2px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(12deg 75% 62%);--ae-secondary-color:hsl(15deg 6% 13%);--ae-main-bg-color:hsl(30deg 16% 6%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(335deg 66% 85%);--ae-secondary-label-color:hsl(150deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(12deg 75% 62%);--ae-input-placeholder-color:hsl(12deg 75% 62%);--ae-input-bg-color:hsl(30deg 17% 8%);--ae-input-border-color:hsl(30deg 20% 16%);--ae-input-hover-text-color:hsl(30deg 18% 12%);--ae-panel-bg-color:hsl(30deg 18% 12%);--ae-panel-border-color:hsl(30deg 16% 16%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:3px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(15deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(30deg 16% 16%);--ae-group-gap:1px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(15deg 77% 58%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:28px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:16px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(15deg 77% 58%);--ae-input-placeholder-color:hsl(216deg 5% 60%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(16deg 94% 93%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:0px;--ae-gap-size-val:3px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:2px;--ae-group-radius:6px;--ae-group-border-size:0px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:2px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max( var(--ae-outside-gap-size), var(--ae-inside-padding-size) );--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(168deg 97% 41%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:23px;--ae-label-color:hsl(210deg 4% 80%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(168deg 97% 41%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(210deg 6% 20%);--ae-input-hover-text-color:hsl(240deg 18% 12%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(220deg 5% 25%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:6px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 7% 11%);--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-border-color:hsl(240deg 16% 16%);--ae-group-gap:1px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(168deg 97% 41%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:14px;--ae-input-line-height:20px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:0px;--ae-input-border-radius:5px;--ae-input-text-color:hsl(168deg 97% 41%);--ae-input-placeholder-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(168deg 96% 80%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(210deg 6% 20%);--ae-panel-padding:5px;--ae-border-radius:5px;--ae-border-size:2px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:3px;--ae-group-radius:8px;--ae-group-border-size:1px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:5px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size), var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size), var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-primary-color:hsl(190deg 75% 60%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-main-bg-color:hsl(0deg 0% 10%);--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-input-icon-height:calc(var(--ae-input-height) - var(--ae-input-border-size) * 2);--ae-input-padding:5px;--ae-input-font-size:12px;--ae-input-line-height:23px;--ae-label-color:hsl(216deg 5% 60%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-text-color:hsl(216deg 5% 60%);--ae-input-placeholder-color:hsl(190deg 75% 60%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(228deg 6% 17%);--ae-input-hover-text-color:hsl(225deg 6% 13%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-gap-size-val:5px;--ae-gap-size:max(var(--ae-gap-size-val), var(--ae-border-size));--ae-border-size-neg:calc(var(--ae-border-size) * -1);--ae-border-size-x2:calc((var(--ae-border-size) * 2) + 0px);--ae-group-bg-color:hsl(225deg 6% 13%);--ae-group-padding:2px;--ae-group-radius:0px;--ae-group-border-size:1px;--ae-group-border-color:hsl(225deg 6% 13%);--ae-group-gap:5px;--ae-panel-border-radius:0px;--ae-subpanel-border-radius:8px;--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max( var(--ae-outside-gap-size), var(--ae-inside-padding-size) );--ae-icon-size:22px;--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--panel-border-radius:4px;--subpanel-border-radius:8px;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-size:22px;--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
|
||||
@@ -1 +0,0 @@
|
||||
--ae-main-bg-color:hsl(185deg 75% 3%);--ae-primary-color:hsl(182deg 95% 51%);--ae-input-bg-color:hsl(184deg 89% 7%);--ae-input-border-color:hsl(185deg 72% 25%);--ae-panel-bg-color:hsl(185deg 73% 3%);--ae-panel-border-color:hsl(185deg 72% 25%);--ae-panel-border-radius:0px;--ae-subpanel-border-radius:0px;--ae-outside-gap-size:2px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-size:22px;--ae-label-color:hsl(182deg 95% 75%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:8px;--ae-input-height:35px;--ae-input-slider-height:0.5;--ae-gap-size-val:1px;--ae-input-font-size:11px;--ae-input-line-height:23px;--ae-input-border-size:1px;--ae-input-border-radius:0px;--ae-input-padding:5px;--ae-panel-padding:5px;--ae-border-radius:0px;--ae-border-size:1px;--ae-group-padding:0px;--ae-group-radius:0px;--ae-group-border-size:0px;--ae-group-gap:1px;--ae-group-bg-color:hsl(185deg 73% 3%);--ae-group-border-color:hsl(185deg 73% 3%);--ae-secondary-color:hsl(225deg 6% 13%);--ae-input-text-color:hsl(168deg 75% 70%);--ae-input-placeholder-color:hsl(185deg 72% 25%);--ae-secondary-label-color:hsl(0deg 100% 50%);--ae-input-hover-text-color:hsl(182deg 94% 80%);
|
||||
@@ -1,119 +0,0 @@
|
||||
<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>Anapnoe UI-UX Core extension leverages a custom-made visual editor and a cutting-edge component library
|
||||
to facilitate the rapid development of sophisticated Gradio applications.
|
||||
In addition to its visually appealing design and well-planned layout, this extension
|
||||
offers several performance enhancements to both the <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:
|
||||
</p>
|
||||
<ul>
|
||||
|
||||
<li>Removing redundant Checkpoints and "Extra Networks" (Textual Inversion, Lora, and Hypernetworks)
|
||||
from img2img to reduce duplicated images and event listeners.</li>
|
||||
<li>Eradicating inline event listeners from "Extra Networks" cards and action buttons.</li>
|
||||
<li>Applying an event delegation pattern to further streamline the code by consolidating event
|
||||
handling for "Extra Networks" cards and action buttons.</li>
|
||||
<li>Replacing all default Gradio stylesheets in the DOM with an optimized version that promote
|
||||
better visual coherence across components.</li>
|
||||
<li>Eliminating inline styles and Svelte classes from the DOM to minimize clutter and improve
|
||||
efficiency.</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">
|
||||
<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.
|
||||
<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>
|
||||
</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>
|
||||
<img alt="Anapnoe UI-UX default theme" src="./file=extensions-builtin/anapnoe-sd-uiux/html/images/workspaces.png" lazy="true"/>
|
||||
<p>
|
||||
<a href="https://buymeacoffee.com/dayanbayah" target="_blank">Become a supporter</a> and get early access to Workspaces for UI-UX.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="flexbox col">
|
||||
<h2>
|
||||
Advanced Theme Style configurator [planned]
|
||||
</h2>
|
||||
<div class="column-1">
|
||||
<p>
|
||||
A sophisticated theme editor allowing you to personalize icons, fonts, and range sliders.
|
||||
Tailor the visual experience of the user interface with the Advanced Theme Style configurator.
|
||||
</p>
|
||||
</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" src="./file=extensions-builtin/anapnoe-sd-uiux/html/images/anapnoe-gradio-app-visual-builder.png" lazy="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
@@ -1,304 +0,0 @@
|
||||
<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 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 title="Deforum" id="deforum_nav" tabItemId="#split-app, #deforum_tabitem" tabGroup="main_group"
|
||||
data-click="#tabs" onclick="mainTabs(this, '#tab_deforum')" class="xtabs-tab hidden">
|
||||
<div class="mask-icon icon-deforum">
|
||||
</div>
|
||||
<span>Deforum</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" id="iwsee"
|
||||
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" id="icly88e"
|
||||
class="split-container">
|
||||
<div id="template-extras-results" class="template"></div>
|
||||
</div>
|
||||
</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 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 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">
|
||||
</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>
|
||||
@@ -1,143 +0,0 @@
|
||||
<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 title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux">
|
||||
<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="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" 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 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">
|
||||
<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">
|
||||
<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>
|
||||
<div class="flexbox col spacer-v">
|
||||
</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="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>
|
||||
@@ -1,44 +0,0 @@
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
@@ -1,97 +0,0 @@
|
||||
|
||||
<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" 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>
|
||||
@@ -1,15 +0,0 @@
|
||||
<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>
|
||||
@@ -1,55 +0,0 @@
|
||||
<div id="layout_{{template_key}}" class="layout no-padding-one layout-extra-networks">
|
||||
<div class="flexbox row padding">
|
||||
<button toggle="true" class="ae-button shrink show-dirs">
|
||||
<div class="mask-icon icon-node-tree">
|
||||
</div>
|
||||
</button>
|
||||
<button class="ae-button shrink refresh-extra-networks" data-click="#txt2img_extra_refresh">
|
||||
<div class="mask-icon refresh">
|
||||
</div>
|
||||
</button>
|
||||
<input id="{{template_key}}_search" data-target="#{{template_key}}_cards .card" class="search_extra_networks" type="text" placeholder="Search..">
|
||||
|
||||
<select name="order_by" data-target="#{{template_key}}_cards .card" id="{{template_key}}_order_by" class="extra_networks_order_by">
|
||||
<option selected value="data-sort-default">Default Sort</option>
|
||||
<option value="data-sort-date_created">Date Created</option>
|
||||
<option value="data-sort-date_modified">Date Modified</option>
|
||||
<option value="data-sort-name">Name</option>
|
||||
</select>
|
||||
|
||||
<button toggle="true" class="ae-button shrink reverse-order">
|
||||
<div class="mask-icon icon-sort">
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="{{template_key}}_aside_split" direction="horizontal" gutterSize="8" class="split">
|
||||
<div id="{{template_key}}_aside" data-minSize="0" data-initSize="0" class="split-container no-drag">
|
||||
<div class="layout">
|
||||
<div class="layout-content">
|
||||
<div search-field="#{{template_key}}_search" data-selector="#{{template_key}}_tree, #{{template_key}}_dirs" data-parent-selector="#tab_txt2img" class="portal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{{template_key}}_main" data-minSize="0" data-initSize="100" class="split-container no-drag">
|
||||
<div class="layout">
|
||||
<div class="layout-content">
|
||||
<div class="xtabs auto-scroll">
|
||||
<div class="xtabs-items no-padding">
|
||||
<div id="{{template_key}}_cards_tabitem" class="xtabs-item">
|
||||
<div data-selector="#{{template_key}}_cards" data-parent-selector="#tab_txt2img" class="portal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{{template_key}}_main_footer" class="layout-footer ">
|
||||
<div class="flexbox col model-preloader">
|
||||
</div>
|
||||
<div class="flexbox col model-selected">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,51 +0,0 @@
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
|
||||
<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>
|
||||
@@ -1,47 +0,0 @@
|
||||
<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="ae-button-e77" class="ae-button" data-click="#txt2img_nav, #txt2img_params">
|
||||
<div id="portal-26" 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="ae-button-e78" class="ae-button" data-click="#img2img_nav, #img2img_params">
|
||||
<div id="portal-15" 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="ae-button-e79" class="ae-button" data-click="#img2img_nav, #img2img_params">
|
||||
<div id="portal-27" 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="ae-button-e76" class="ae-button" data-click="#extras_nav">
|
||||
<div id="portal-28" 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 id="portal-9" data-selector="#tab_pnginfo textarea" data-parent-selector="gradio-app" class="portal full-height no-padding-one no-bg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
|
||||
<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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,814 +0,0 @@
|
||||
/*! Split.js - v1.6.5 */
|
||||
|
||||
(function(global, factory) {
|
||||
/* eslint-disable no-undef */
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
/* eslint-disable no-undef */
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Split = factory());
|
||||
}(this, (function() {
|
||||
'use strict';
|
||||
|
||||
// The programming goals of Split.js are to deliver readable, understandable and
|
||||
// maintainable code, while at the same time manually optimizing for tiny minified file size,
|
||||
// browser compatibility without additional requirements
|
||||
// and very few assumptions about the user's page layout.
|
||||
var global = typeof window !== 'undefined' ? window : null;
|
||||
var ssr = global === null;
|
||||
var document = !ssr ? global.document : undefined;
|
||||
|
||||
// Save a couple long function names that are used frequently.
|
||||
// This optimization saves around 400 bytes.
|
||||
var addEventListener = 'addEventListener';
|
||||
var removeEventListener = 'removeEventListener';
|
||||
var getBoundingClientRect = 'getBoundingClientRect';
|
||||
var gutterStartDragging = '_a';
|
||||
var aGutterSize = '_b';
|
||||
var bGutterSize = '_c';
|
||||
var HORIZONTAL = 'horizontal';
|
||||
var NOOP = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
// Helper function determines which prefixes of CSS calc we need.
|
||||
// We only need to do this once on startup, when this anonymous function is called.
|
||||
//
|
||||
// Tests -webkit, -moz and -o prefixes. Modified from StackOverflow:
|
||||
// http://stackoverflow.com/questions/16625140/js-feature-detection-to-detect-the-usage-of-webkit-calc-over-calc/16625167#16625167
|
||||
var calc = ssr ?
|
||||
'calc' :
|
||||
((['', '-webkit-', '-moz-', '-o-']
|
||||
.filter(function(prefix) {
|
||||
var el = document.createElement('div');
|
||||
el.style.cssText = "width:" + prefix + "calc(9px)";
|
||||
|
||||
return !!el.style.length;
|
||||
})
|
||||
.shift()) + "calc");
|
||||
|
||||
// Helper function checks if its argument is a string-like type
|
||||
var isString = function(v) {
|
||||
return typeof v === 'string' || v instanceof String;
|
||||
};
|
||||
|
||||
// Helper function allows elements and string selectors to be used
|
||||
// interchangeably. In either case an element is returned. This allows us to
|
||||
// do `Split([elem1, elem2])` as well as `Split(['#id1', '#id2'])`.
|
||||
var elementOrSelector = function(el) {
|
||||
if (isString(el)) {
|
||||
var ele = document.querySelector(el);
|
||||
if (!ele) {
|
||||
throw new Error(("Selector " + el + " did not match a DOM element"));
|
||||
}
|
||||
return ele;
|
||||
}
|
||||
|
||||
return el;
|
||||
};
|
||||
|
||||
// Helper function gets a property from the properties object, with a default fallback
|
||||
var getOption = function(options, propName, def) {
|
||||
var value = options[propName];
|
||||
if (value !== undefined) {
|
||||
return value;
|
||||
}
|
||||
return def;
|
||||
};
|
||||
|
||||
var getGutterSize = function(gutterSize, isFirst, isLast, gutterAlign) {
|
||||
if (isFirst) {
|
||||
if (gutterAlign === 'end') {
|
||||
return 0;
|
||||
}
|
||||
if (gutterAlign === 'center') {
|
||||
return gutterSize / 2;
|
||||
}
|
||||
} else if (isLast) {
|
||||
if (gutterAlign === 'start') {
|
||||
return 0;
|
||||
}
|
||||
if (gutterAlign === 'center') {
|
||||
return gutterSize / 2;
|
||||
}
|
||||
}
|
||||
|
||||
return gutterSize;
|
||||
};
|
||||
|
||||
// Default options
|
||||
var defaultGutterFn = function(i, gutterDirection) {
|
||||
var gut = document.createElement('div');
|
||||
gut.className = "gutter gutter-" + gutterDirection;
|
||||
return gut;
|
||||
};
|
||||
|
||||
var defaultElementStyleFn = function(dim, size, gutSize) {
|
||||
var style = {};
|
||||
|
||||
if (!isString(size)) {
|
||||
style[dim] = calc + "(" + size + "% - " + gutSize + "px)";
|
||||
} else {
|
||||
style[dim] = size;
|
||||
}
|
||||
|
||||
return style;
|
||||
};
|
||||
|
||||
var defaultGutterStyleFn = function(dim, gutSize) {
|
||||
var obj;
|
||||
|
||||
return ((obj = {}, obj[dim] = (gutSize + "px"), obj));
|
||||
};
|
||||
|
||||
// The main function to initialize a split. Split.js thinks about each pair
|
||||
// of elements as an independant pair. Dragging the gutter between two elements
|
||||
// only changes the dimensions of elements in that pair. This is key to understanding
|
||||
// how the following functions operate, since each function is bound to a pair.
|
||||
//
|
||||
// A pair object is shaped like this:
|
||||
//
|
||||
// {
|
||||
// a: DOM element,
|
||||
// b: DOM element,
|
||||
// aMin: Number,
|
||||
// bMin: Number,
|
||||
// dragging: Boolean,
|
||||
// parent: DOM element,
|
||||
// direction: 'horizontal' | 'vertical'
|
||||
// }
|
||||
//
|
||||
// The basic sequence:
|
||||
//
|
||||
// 1. Set defaults to something sane. `options` doesn't have to be passed at all.
|
||||
// 2. Initialize a bunch of strings based on the direction we're splitting.
|
||||
// A lot of the behavior in the rest of the library is paramatized down to
|
||||
// rely on CSS strings and classes.
|
||||
// 3. Define the dragging helper functions, and a few helpers to go with them.
|
||||
// 4. Loop through the elements while pairing them off. Every pair gets an
|
||||
// `pair` object and a gutter.
|
||||
// 5. Actually size the pair elements, insert gutters and attach event listeners.
|
||||
var Split = function(idsOption, options) {
|
||||
if (options === void 0) options = {};
|
||||
|
||||
if (ssr) {
|
||||
return {};
|
||||
}
|
||||
|
||||
var ids = idsOption;
|
||||
var dimension;
|
||||
var clientAxis;
|
||||
var position;
|
||||
var positionEnd;
|
||||
var clientSize;
|
||||
var elements;
|
||||
|
||||
// Allow HTMLCollection to be used as an argument when supported
|
||||
if (Array.from) {
|
||||
ids = Array.from(ids);
|
||||
}
|
||||
|
||||
// All DOM elements in the split should have a common parent. We can grab
|
||||
// the first elements parent and hope users read the docs because the
|
||||
// behavior will be whacky otherwise.
|
||||
var firstElement = elementOrSelector(ids[0]);
|
||||
var parent = firstElement.parentNode;
|
||||
var parentStyle = getComputedStyle ? getComputedStyle(parent) : null;
|
||||
var parentFlexDirection = parentStyle ? parentStyle.flexDirection : null;
|
||||
|
||||
// Set default options.sizes to equal percentages of the parent element.
|
||||
var sizes = getOption(options, 'sizes') || ids.map(function() {
|
||||
return 100 / ids.length;
|
||||
});
|
||||
|
||||
// Standardize minSize and maxSize to an array if it isn't already.
|
||||
// This allows minSize and maxSize to be passed as a number.
|
||||
var minSize = getOption(options, 'minSize', 100);
|
||||
var minSizes = Array.isArray(minSize) ? minSize : ids.map(function() {
|
||||
return minSize;
|
||||
});
|
||||
var maxSize = getOption(options, 'maxSize', Infinity);
|
||||
var maxSizes = Array.isArray(maxSize) ? maxSize : ids.map(function() {
|
||||
return maxSize;
|
||||
});
|
||||
|
||||
// Get other options
|
||||
var expandToMin = getOption(options, 'expandToMin', false);
|
||||
var gutterSize = getOption(options, 'gutterSize', 10);
|
||||
var gutterAlign = getOption(options, 'gutterAlign', 'center');
|
||||
var snapOffset = getOption(options, 'snapOffset', 30);
|
||||
var snapOffsets = Array.isArray(snapOffset) ? snapOffset : ids.map(function() {
|
||||
return snapOffset;
|
||||
});
|
||||
var dragInterval = getOption(options, 'dragInterval', 1);
|
||||
var direction = getOption(options, 'direction', HORIZONTAL);
|
||||
var cursor = getOption(
|
||||
options,
|
||||
'cursor',
|
||||
direction === HORIZONTAL ? 'col-resize' : 'row-resize'
|
||||
);
|
||||
var gutter = getOption(options, 'gutter', defaultGutterFn);
|
||||
var elementStyle = getOption(
|
||||
options,
|
||||
'elementStyle',
|
||||
defaultElementStyleFn
|
||||
);
|
||||
var gutterStyle = getOption(options, 'gutterStyle', defaultGutterStyleFn);
|
||||
|
||||
// 2. Initialize a bunch of strings based on the direction we're splitting.
|
||||
// A lot of the behavior in the rest of the library is paramatized down to
|
||||
// rely on CSS strings and classes.
|
||||
if (direction === HORIZONTAL) {
|
||||
dimension = 'width';
|
||||
clientAxis = 'clientX';
|
||||
position = 'left';
|
||||
positionEnd = 'right';
|
||||
clientSize = 'clientWidth';
|
||||
} else if (direction === 'vertical') {
|
||||
dimension = 'height';
|
||||
clientAxis = 'clientY';
|
||||
position = 'top';
|
||||
positionEnd = 'bottom';
|
||||
clientSize = 'clientHeight';
|
||||
}
|
||||
|
||||
// 3. Define the dragging helper functions, and a few helpers to go with them.
|
||||
// Each helper is bound to a pair object that contains its metadata. This
|
||||
// also makes it easy to store references to listeners that that will be
|
||||
// added and removed.
|
||||
//
|
||||
// Even though there are no other functions contained in them, aliasing
|
||||
// this to self saves 50 bytes or so since it's used so frequently.
|
||||
//
|
||||
// The pair object saves metadata like dragging state, position and
|
||||
// event listener references.
|
||||
|
||||
function setElementSize(el, size, gutSize, i) {
|
||||
// Split.js allows setting sizes via numbers (ideally), or if you must,
|
||||
// by string, like '300px'. This is less than ideal, because it breaks
|
||||
// the fluid layout that `calc(% - px)` provides. You're on your own if you do that,
|
||||
// make sure you calculate the gutter size by hand.
|
||||
var style = elementStyle(dimension, size, gutSize, i);
|
||||
|
||||
Object.keys(style).forEach(function(prop) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
el.style[prop] = style[prop];
|
||||
});
|
||||
}
|
||||
|
||||
function setGutterSize(gutterElement, gutSize, i) {
|
||||
var style = gutterStyle(dimension, gutSize, i);
|
||||
|
||||
Object.keys(style).forEach(function(prop) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
gutterElement.style[prop] = style[prop];
|
||||
});
|
||||
}
|
||||
|
||||
function getSizes() {
|
||||
return elements.map(function(element) {
|
||||
return element.size;
|
||||
});
|
||||
}
|
||||
|
||||
// Supports touch events, but not multitouch, so only the first
|
||||
// finger `touches[0]` is counted.
|
||||
function getMousePosition(e) {
|
||||
if ('touches' in e) {
|
||||
return e.touches[0][clientAxis];
|
||||
}
|
||||
return e[clientAxis];
|
||||
}
|
||||
|
||||
// Actually adjust the size of elements `a` and `b` to `offset` while dragging.
|
||||
// calc is used to allow calc(percentage + gutterpx) on the whole split instance,
|
||||
// which allows the viewport to be resized without additional logic.
|
||||
// Element a's size is the same as offset. b's size is total size - a size.
|
||||
// Both sizes are calculated from the initial parent percentage,
|
||||
// then the gutter size is subtracted.
|
||||
function adjust(offset) {
|
||||
var a = elements[this.a];
|
||||
var b = elements[this.b];
|
||||
var percentage = a.size + b.size;
|
||||
|
||||
a.size = (offset / this.size) * percentage;
|
||||
b.size = percentage - (offset / this.size) * percentage;
|
||||
|
||||
setElementSize(a.element, a.size, this[aGutterSize], a.i);
|
||||
setElementSize(b.element, b.size, this[bGutterSize], b.i);
|
||||
}
|
||||
|
||||
// drag, where all the magic happens. The logic is really quite simple:
|
||||
//
|
||||
// 1. Ignore if the pair is not dragging.
|
||||
// 2. Get the offset of the event.
|
||||
// 3. Snap offset to min if within snappable range (within min + snapOffset).
|
||||
// 4. Actually adjust each element in the pair to offset.
|
||||
//
|
||||
// ---------------------------------------------------------------------
|
||||
// | | <- a.minSize || b.minSize -> | |
|
||||
// | | | <- this.snapOffset || this.snapOffset -> | | |
|
||||
// | | | || | | |
|
||||
// | | | || | | |
|
||||
// ---------------------------------------------------------------------
|
||||
// | <- this.start this.size -> |
|
||||
function drag(e) {
|
||||
var offset;
|
||||
var a = elements[this.a];
|
||||
var b = elements[this.b];
|
||||
|
||||
if (!this.dragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the offset of the event from the first side of the
|
||||
// pair `this.start`. Then offset by the initial position of the
|
||||
// mouse compared to the gutter size.
|
||||
offset =
|
||||
getMousePosition(e) -
|
||||
this.start +
|
||||
(this[aGutterSize] - this.dragOffset);
|
||||
|
||||
if (dragInterval > 1) {
|
||||
offset = Math.round(offset / dragInterval) * dragInterval;
|
||||
}
|
||||
|
||||
// If within snapOffset of min or max, set offset to min or max.
|
||||
// snapOffset buffers a.minSize and b.minSize, so logic is opposite for both.
|
||||
// Include the appropriate gutter sizes to prevent overflows.
|
||||
if (offset <= a.minSize + a.snapOffset + this[aGutterSize]) {
|
||||
offset = a.minSize + this[aGutterSize];
|
||||
} else if (
|
||||
offset >=
|
||||
this.size - (b.minSize + b.snapOffset + this[bGutterSize])
|
||||
) {
|
||||
offset = this.size - (b.minSize + this[bGutterSize]);
|
||||
}
|
||||
|
||||
if (offset >= a.maxSize - a.snapOffset + this[aGutterSize]) {
|
||||
offset = a.maxSize + this[aGutterSize];
|
||||
} else if (
|
||||
offset <=
|
||||
this.size - (b.maxSize - b.snapOffset + this[bGutterSize])
|
||||
) {
|
||||
offset = this.size - (b.maxSize + this[bGutterSize]);
|
||||
}
|
||||
|
||||
// Actually adjust the size.
|
||||
adjust.call(this, offset);
|
||||
|
||||
// Call the drag callback continously. Don't do anything too intensive
|
||||
// in this callback.
|
||||
getOption(options, 'onDrag', NOOP)(getSizes());
|
||||
}
|
||||
|
||||
// Cache some important sizes when drag starts, so we don't have to do that
|
||||
// continously:
|
||||
//
|
||||
// `size`: The total size of the pair. First + second + first gutter + second gutter.
|
||||
// `start`: The leading side of the first element.
|
||||
//
|
||||
// ------------------------------------------------
|
||||
// | aGutterSize -> ||| |
|
||||
// | ||| |
|
||||
// | ||| |
|
||||
// | ||| <- bGutterSize |
|
||||
// ------------------------------------------------
|
||||
// | <- start size -> |
|
||||
function calculateSizes() {
|
||||
// Figure out the parent size minus padding.
|
||||
var a = elements[this.a].element;
|
||||
var b = elements[this.b].element;
|
||||
|
||||
var aBounds = a[getBoundingClientRect]();
|
||||
var bBounds = b[getBoundingClientRect]();
|
||||
|
||||
this.size =
|
||||
aBounds[dimension] +
|
||||
bBounds[dimension] +
|
||||
this[aGutterSize] +
|
||||
this[bGutterSize];
|
||||
this.start = aBounds[position];
|
||||
this.end = aBounds[positionEnd];
|
||||
}
|
||||
|
||||
function innerSize(element) {
|
||||
// Return nothing if getComputedStyle is not supported (< IE9)
|
||||
// Or if parent element has no layout yet
|
||||
if (!getComputedStyle) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var computedStyle = getComputedStyle(element);
|
||||
|
||||
if (!computedStyle) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var size = element[clientSize];
|
||||
|
||||
if (size === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (direction === HORIZONTAL) {
|
||||
size -=
|
||||
parseFloat(computedStyle.paddingLeft) +
|
||||
parseFloat(computedStyle.paddingRight);
|
||||
} else {
|
||||
size -=
|
||||
parseFloat(computedStyle.paddingTop) +
|
||||
parseFloat(computedStyle.paddingBottom);
|
||||
}
|
||||
|
||||
return size;
|
||||
}
|
||||
|
||||
// When specifying percentage sizes that are less than the computed
|
||||
// size of the element minus the gutter, the lesser percentages must be increased
|
||||
// (and decreased from the other elements) to make space for the pixels
|
||||
// subtracted by the gutters.
|
||||
function trimToMin(sizesToTrim) {
|
||||
// Try to get inner size of parent element.
|
||||
// If it's no supported, return original sizes.
|
||||
var parentSize = innerSize(parent);
|
||||
if (parentSize === null) {
|
||||
return sizesToTrim;
|
||||
}
|
||||
|
||||
if (minSizes.reduce(function(a, b) {
|
||||
return a + b;
|
||||
}, 0) > parentSize) {
|
||||
return sizesToTrim;
|
||||
}
|
||||
|
||||
// Keep track of the excess pixels, the amount of pixels over the desired percentage
|
||||
// Also keep track of the elements with pixels to spare, to decrease after if needed
|
||||
var excessPixels = 0;
|
||||
var toSpare = [];
|
||||
|
||||
var pixelSizes = sizesToTrim.map(function(size, i) {
|
||||
// Convert requested percentages to pixel sizes
|
||||
var pixelSize = (parentSize * size) / 100;
|
||||
var elementGutterSize = getGutterSize(
|
||||
gutterSize,
|
||||
i === 0,
|
||||
i === sizesToTrim.length - 1,
|
||||
gutterAlign
|
||||
);
|
||||
var elementMinSize = minSizes[i] + elementGutterSize;
|
||||
|
||||
// If element is too smal, increase excess pixels by the difference
|
||||
// and mark that it has no pixels to spare
|
||||
if (pixelSize < elementMinSize) {
|
||||
excessPixels += elementMinSize - pixelSize;
|
||||
toSpare.push(0);
|
||||
return elementMinSize;
|
||||
}
|
||||
|
||||
// Otherwise, mark the pixels it has to spare and return it's original size
|
||||
toSpare.push(pixelSize - elementMinSize);
|
||||
return pixelSize;
|
||||
});
|
||||
|
||||
// If nothing was adjusted, return the original sizes
|
||||
if (excessPixels === 0) {
|
||||
return sizesToTrim;
|
||||
}
|
||||
|
||||
return pixelSizes.map(function(pixelSize, i) {
|
||||
var newPixelSize = pixelSize;
|
||||
|
||||
// While there's still pixels to take, and there's enough pixels to spare,
|
||||
// take as many as possible up to the total excess pixels
|
||||
if (excessPixels > 0 && toSpare[i] - excessPixels > 0) {
|
||||
var takenPixels = Math.min(
|
||||
excessPixels,
|
||||
toSpare[i] - excessPixels
|
||||
);
|
||||
|
||||
// Subtract the amount taken for the next iteration
|
||||
excessPixels -= takenPixels;
|
||||
newPixelSize = pixelSize - takenPixels;
|
||||
}
|
||||
|
||||
// Return the pixel size adjusted as a percentage
|
||||
return (newPixelSize / parentSize) * 100;
|
||||
});
|
||||
}
|
||||
|
||||
// stopDragging is very similar to startDragging in reverse.
|
||||
function stopDragging() {
|
||||
var self = this;
|
||||
var a = elements[self.a].element;
|
||||
var b = elements[self.b].element;
|
||||
|
||||
if (self.dragging) {
|
||||
getOption(options, 'onDragEnd', NOOP)(getSizes());
|
||||
}
|
||||
|
||||
self.dragging = false;
|
||||
|
||||
// Remove the stored event listeners. This is why we store them.
|
||||
global[removeEventListener]('mouseup', self.stop);
|
||||
global[removeEventListener]('touchend', self.stop);
|
||||
global[removeEventListener]('touchcancel', self.stop);
|
||||
global[removeEventListener]('mousemove', self.move);
|
||||
global[removeEventListener]('touchmove', self.move);
|
||||
|
||||
// Clear bound function references
|
||||
self.stop = null;
|
||||
self.move = null;
|
||||
|
||||
a[removeEventListener]('selectstart', NOOP);
|
||||
a[removeEventListener]('dragstart', NOOP);
|
||||
b[removeEventListener]('selectstart', NOOP);
|
||||
b[removeEventListener]('dragstart', NOOP);
|
||||
|
||||
a.style.userSelect = '';
|
||||
a.style.webkitUserSelect = '';
|
||||
a.style.MozUserSelect = '';
|
||||
a.style.pointerEvents = '';
|
||||
|
||||
b.style.userSelect = '';
|
||||
b.style.webkitUserSelect = '';
|
||||
b.style.MozUserSelect = '';
|
||||
b.style.pointerEvents = '';
|
||||
|
||||
self.gutter.style.cursor = '';
|
||||
self.parent.style.cursor = '';
|
||||
document.body.style.cursor = '';
|
||||
}
|
||||
|
||||
// startDragging calls `calculateSizes` to store the inital size in the pair object.
|
||||
// It also adds event listeners for mouse/touch events,
|
||||
// and prevents selection while dragging so avoid the selecting text.
|
||||
function startDragging(e) {
|
||||
// Right-clicking can't start dragging.
|
||||
if ('button' in e && e.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Alias frequently used variables to save space. 200 bytes.
|
||||
var self = this;
|
||||
var a = elements[self.a].element;
|
||||
var b = elements[self.b].element;
|
||||
|
||||
// Call the onDragStart callback.
|
||||
if (!self.dragging) {
|
||||
getOption(options, 'onDragStart', NOOP)(getSizes());
|
||||
}
|
||||
|
||||
// Don't actually drag the element. We emulate that in the drag function.
|
||||
e.preventDefault();
|
||||
|
||||
// Set the dragging property of the pair object.
|
||||
self.dragging = true;
|
||||
|
||||
// Create two event listeners bound to the same pair object and store
|
||||
// them in the pair object.
|
||||
self.move = drag.bind(self);
|
||||
self.stop = stopDragging.bind(self);
|
||||
|
||||
// All the binding. `window` gets the stop events in case we drag out of the elements.
|
||||
global[addEventListener]('mouseup', self.stop);
|
||||
global[addEventListener]('touchend', self.stop);
|
||||
global[addEventListener]('touchcancel', self.stop);
|
||||
global[addEventListener]('mousemove', self.move);
|
||||
global[addEventListener]('touchmove', self.move);
|
||||
|
||||
// Disable selection. Disable!
|
||||
a[addEventListener]('selectstart', NOOP);
|
||||
a[addEventListener]('dragstart', NOOP);
|
||||
b[addEventListener]('selectstart', NOOP);
|
||||
b[addEventListener]('dragstart', NOOP);
|
||||
|
||||
a.style.userSelect = 'none';
|
||||
a.style.webkitUserSelect = 'none';
|
||||
a.style.MozUserSelect = 'none';
|
||||
a.style.pointerEvents = 'none';
|
||||
|
||||
b.style.userSelect = 'none';
|
||||
b.style.webkitUserSelect = 'none';
|
||||
b.style.MozUserSelect = 'none';
|
||||
b.style.pointerEvents = 'none';
|
||||
|
||||
// Set the cursor at multiple levels
|
||||
self.gutter.style.cursor = cursor;
|
||||
self.parent.style.cursor = cursor;
|
||||
document.body.style.cursor = cursor;
|
||||
|
||||
// Cache the initial sizes of the pair.
|
||||
calculateSizes.call(self);
|
||||
|
||||
// Determine the position of the mouse compared to the gutter
|
||||
self.dragOffset = getMousePosition(e) - self.end;
|
||||
}
|
||||
|
||||
// adjust sizes to ensure percentage is within min size and gutter.
|
||||
sizes = trimToMin(sizes);
|
||||
|
||||
// 5. Create pair and element objects. Each pair has an index reference to
|
||||
// elements `a` and `b` of the pair (first and second elements).
|
||||
// Loop through the elements while pairing them off. Every pair gets a
|
||||
// `pair` object and a gutter.
|
||||
//
|
||||
// Basic logic:
|
||||
//
|
||||
// - Starting with the second element `i > 0`, create `pair` objects with
|
||||
// `a = i - 1` and `b = i`
|
||||
// - Set gutter sizes based on the _pair_ being first/last. The first and last
|
||||
// pair have gutterSize / 2, since they only have one half gutter, and not two.
|
||||
// - Create gutter elements and add event listeners.
|
||||
// - Set the size of the elements, minus the gutter sizes.
|
||||
//
|
||||
// -----------------------------------------------------------------------
|
||||
// | i=0 | i=1 | i=2 | i=3 |
|
||||
// | | | | |
|
||||
// | pair 0 pair 1 pair 2 |
|
||||
// | | | | |
|
||||
// -----------------------------------------------------------------------
|
||||
var pairs = [];
|
||||
elements = ids.map(function(id, i) {
|
||||
// Create the element object.
|
||||
var element = {
|
||||
element: elementOrSelector(id),
|
||||
size: sizes[i],
|
||||
minSize: minSizes[i],
|
||||
maxSize: maxSizes[i],
|
||||
snapOffset: snapOffsets[i],
|
||||
i: i,
|
||||
};
|
||||
|
||||
var pair;
|
||||
|
||||
if (i > 0) {
|
||||
// Create the pair object with its metadata.
|
||||
pair = {
|
||||
a: i - 1,
|
||||
b: i,
|
||||
dragging: false,
|
||||
direction: direction,
|
||||
parent: parent,
|
||||
};
|
||||
|
||||
pair[aGutterSize] = getGutterSize(
|
||||
gutterSize,
|
||||
i - 1 === 0,
|
||||
false,
|
||||
gutterAlign
|
||||
);
|
||||
pair[bGutterSize] = getGutterSize(
|
||||
gutterSize,
|
||||
false,
|
||||
i === ids.length - 1,
|
||||
gutterAlign
|
||||
);
|
||||
|
||||
// if the parent has a reverse flex-direction, switch the pair elements.
|
||||
if (
|
||||
parentFlexDirection === 'row-reverse' ||
|
||||
parentFlexDirection === 'column-reverse'
|
||||
) {
|
||||
var temp = pair.a;
|
||||
pair.a = pair.b;
|
||||
pair.b = temp;
|
||||
}
|
||||
}
|
||||
|
||||
// Determine the size of the current element. IE8 is supported by
|
||||
// staticly assigning sizes without draggable gutters. Assigns a string
|
||||
// to `size`.
|
||||
//
|
||||
// Create gutter elements for each pair.
|
||||
if (i > 0) {
|
||||
var gutterElement = gutter(i, direction, element.element);
|
||||
setGutterSize(gutterElement, gutterSize, i);
|
||||
|
||||
// Save bound event listener for removal later
|
||||
pair[gutterStartDragging] = startDragging.bind(pair);
|
||||
|
||||
// Attach bound event listener
|
||||
gutterElement[addEventListener](
|
||||
'mousedown',
|
||||
pair[gutterStartDragging]
|
||||
);
|
||||
gutterElement[addEventListener](
|
||||
'touchstart',
|
||||
pair[gutterStartDragging]
|
||||
);
|
||||
|
||||
parent.insertBefore(gutterElement, element.element);
|
||||
|
||||
pair.gutter = gutterElement;
|
||||
}
|
||||
|
||||
setElementSize(
|
||||
element.element,
|
||||
element.size,
|
||||
getGutterSize(
|
||||
gutterSize,
|
||||
i === 0,
|
||||
i === ids.length - 1,
|
||||
gutterAlign
|
||||
),
|
||||
i
|
||||
);
|
||||
|
||||
// After the first iteration, and we have a pair object, append it to the
|
||||
// list of pairs.
|
||||
if (i > 0) {
|
||||
pairs.push(pair);
|
||||
}
|
||||
|
||||
return element;
|
||||
});
|
||||
|
||||
function adjustToMin(element) {
|
||||
var isLast = element.i === pairs.length;
|
||||
var pair = isLast ? pairs[element.i - 1] : pairs[element.i];
|
||||
|
||||
calculateSizes.call(pair);
|
||||
|
||||
var size = isLast ?
|
||||
pair.size - element.minSize - pair[bGutterSize] :
|
||||
element.minSize + pair[aGutterSize];
|
||||
|
||||
adjust.call(pair, size);
|
||||
}
|
||||
|
||||
elements.forEach(function(element) {
|
||||
var computedSize = element.element[getBoundingClientRect]()[dimension];
|
||||
|
||||
if (computedSize < element.minSize) {
|
||||
if (expandToMin) {
|
||||
adjustToMin(element);
|
||||
} else {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.minSize = computedSize;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function setSizes(newSizes) {
|
||||
var trimmed = trimToMin(newSizes);
|
||||
trimmed.forEach(function(newSize, i) {
|
||||
if (i > 0) {
|
||||
var pair = pairs[i - 1];
|
||||
|
||||
var a = elements[pair.a];
|
||||
var b = elements[pair.b];
|
||||
|
||||
a.size = trimmed[i - 1];
|
||||
b.size = newSize;
|
||||
|
||||
setElementSize(a.element, a.size, pair[aGutterSize], a.i);
|
||||
setElementSize(b.element, b.size, pair[bGutterSize], b.i);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function destroy(preserveStyles, preserveGutter) {
|
||||
pairs.forEach(function(pair) {
|
||||
if (preserveGutter !== true) {
|
||||
pair.parent.removeChild(pair.gutter);
|
||||
} else {
|
||||
pair.gutter[removeEventListener](
|
||||
'mousedown',
|
||||
pair[gutterStartDragging]
|
||||
);
|
||||
pair.gutter[removeEventListener](
|
||||
'touchstart',
|
||||
pair[gutterStartDragging]
|
||||
);
|
||||
}
|
||||
|
||||
if (preserveStyles !== true) {
|
||||
var style = elementStyle(
|
||||
dimension,
|
||||
pair.a.size,
|
||||
pair[aGutterSize]
|
||||
);
|
||||
|
||||
Object.keys(style).forEach(function(prop) {
|
||||
elements[pair.a].element.style[prop] = '';
|
||||
elements[pair.b].element.style[prop] = '';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
setSizes: setSizes,
|
||||
getSizes: getSizes,
|
||||
collapse: function collapse(i) {
|
||||
adjustToMin(elements[i]);
|
||||
},
|
||||
destroy: destroy,
|
||||
parent: parent,
|
||||
pairs: pairs,
|
||||
};
|
||||
};
|
||||
|
||||
return Split;
|
||||
|
||||
})));
|
||||
@@ -1,69 +0,0 @@
|
||||
import gradio as gr
|
||||
from modules import script_callbacks, shared
|
||||
from modules.options import options_section, categories
|
||||
|
||||
mapping = [
|
||||
(info.infotext, k) for k, info in shared.opts.data_labels.items() if info.infotext
|
||||
]
|
||||
|
||||
categories.register_category("anapnoe", "Anapnoe UI-UX", position=0)
|
||||
|
||||
shared.options_templates.update(
|
||||
options_section(
|
||||
("anapnoe-core", "User Interface", "anapnoe"),
|
||||
{
|
||||
"uiux_show_input_range_ticks": shared.OptionInfo(
|
||||
True, "Show ticks for input range slider"
|
||||
),
|
||||
"uiux_no_slider_layout": shared.OptionInfo(False, "No input range sliders"),
|
||||
"uiux_disable_transitions": shared.OptionInfo(False, "Disable transitions"),
|
||||
"uiux_default_layout": shared.OptionInfo(
|
||||
"Auto", "Layout", gr.Radio, {"choices": ["Auto", "Desktop", "Mobile"]}
|
||||
),
|
||||
"uiux_mobile_scale": shared.OptionInfo(
|
||||
0.7,
|
||||
"Mobile scale",
|
||||
gr.Slider,
|
||||
{"minimum": 0.5, "maximum": 1, "step": 0.05},
|
||||
),
|
||||
"uiux_show_labels_aside": shared.OptionInfo(
|
||||
False, "Show labels for aside tabs"
|
||||
),
|
||||
"uiux_show_labels_main": shared.OptionInfo(
|
||||
False, "Show labels for main tabs"
|
||||
),
|
||||
"uiux_show_labels_tabs": shared.OptionInfo(
|
||||
False, "Show labels for page tabs"
|
||||
),
|
||||
"uiux_hide_extra_info": shared.OptionInfo(
|
||||
False, "Hide extra info for labels, checkboxes"
|
||||
)
|
||||
},
|
||||
)
|
||||
)
|
||||
shared.options_templates.update(
|
||||
options_section(
|
||||
("anapnoe-ext", "Utils Extensions", "anapnoe"),
|
||||
{
|
||||
"uiux_enable_console_log": shared.OptionInfo(False, "Enable console log"),
|
||||
"uiux_max_resolution_output": shared.OptionInfo(
|
||||
2048, "Max resolution output for txt2img and img2img"
|
||||
),
|
||||
"uiux_ignore_overrides": shared.OptionInfo(
|
||||
[],
|
||||
"Ignore Overrides",
|
||||
gr.CheckboxGroup,
|
||||
lambda: {"choices": list(mapping)},
|
||||
),
|
||||
},
|
||||
)
|
||||
)
|
||||
|
||||
def on_ui_tabs():
|
||||
with gr.Blocks(analytics_enabled=False) as anapnoe_sd_uiux_core:
|
||||
pass
|
||||
|
||||
return ((anapnoe_sd_uiux_core, "UI-UX Core", "anapnoe_sd_uiux_core"),)
|
||||
|
||||
script_callbacks.on_ui_tabs(on_ui_tabs)
|
||||
|
||||
@@ -1,289 +0,0 @@
|
||||
*.copy-path-button {
|
||||
-webkit-mask-image: url(./html/svg/clipboard-fill.svg);
|
||||
}
|
||||
|
||||
*.metadata-button {
|
||||
-webkit-mask-image: url(./html/svg/file-info-fill.svg);
|
||||
}
|
||||
|
||||
*.edit-button.card-button {
|
||||
-webkit-mask-image: url(./html/svg/file-edit-fill.svg);
|
||||
}
|
||||
|
||||
.icon-folder {
|
||||
-webkit-mask-image: url(./html/svg/folder-open-line.svg);
|
||||
}
|
||||
|
||||
.icon-save {
|
||||
-webkit-mask-image: url(./html/svg/save-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-zip {
|
||||
-webkit-mask-image: url(./html/svg/file-zip-line.svg);
|
||||
}
|
||||
|
||||
.icon-2txt2img {
|
||||
-webkit-mask-image: url(./html/svg/t-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-2inpaint {
|
||||
-webkit-mask-image: url(./html/svg/paint-brush-line.svg);
|
||||
}
|
||||
|
||||
.gradio-button:has([class*="icon-2"])::after {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
background-color: var(--ae-input-hover-text-color);
|
||||
-webkit-mask-image: url(./html/svg/arrow-up-line.svg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.icon-2extras {
|
||||
transform: scaleX(-1);
|
||||
-webkit-mask-image: url(./html/svg/picture-in-picture-exit-line.svg);
|
||||
}
|
||||
|
||||
.icon-2img2img {
|
||||
-webkit-mask-image: url(./html/svg/image-line.svg);
|
||||
}
|
||||
|
||||
.refresh {
|
||||
-webkit-mask-image: url(./html/svg/loop-right-line.svg);
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
-webkit-mask-image: url(./html/svg/information-line.svg);
|
||||
}
|
||||
|
||||
.icon-crop {
|
||||
-webkit-mask-image: url(./html/svg/crop-line.svg);
|
||||
}
|
||||
|
||||
.icon-res-switch {
|
||||
-webkit-mask-image: url(./html/svg/arrow-up-down-line.svg);
|
||||
}
|
||||
|
||||
.icon-scripts {
|
||||
-webkit-mask-image: url(./html/svg/plug-line.svg);
|
||||
}
|
||||
|
||||
.icon-generate {
|
||||
-webkit-mask-image: url(./html/svg/ai-generate.svg);
|
||||
}
|
||||
|
||||
.icon-skip {
|
||||
-webkit-mask-image: url(./html/svg/skip-forward-line.svg);
|
||||
}
|
||||
|
||||
.icon-stop {
|
||||
-webkit-mask-image: url(./html/svg/stop-circle-line.svg);
|
||||
}
|
||||
|
||||
.icon-loop {
|
||||
-webkit-mask-image: url(./html/svg/infinity-fill.svg);
|
||||
}
|
||||
|
||||
.icon-node-tree {
|
||||
-webkit-mask-image: url(./html/svg/node-tree.svg);
|
||||
}
|
||||
|
||||
.icon-magic {
|
||||
-webkit-mask-image: url(./html/svg/magic-line.svg);
|
||||
}
|
||||
|
||||
.icon-delete {
|
||||
-webkit-mask-image: url(./html/svg/delete-bin-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-styles-edit {
|
||||
-webkit-mask-image: url(./html/svg/draft-line.svg);
|
||||
}
|
||||
|
||||
.icon-styles-apply {
|
||||
-webkit-mask-image: url(./html/svg/bill-line.svg);
|
||||
}
|
||||
|
||||
.icon-dice {
|
||||
-webkit-mask-image: url(./html/svg/dice-1.svg);
|
||||
}
|
||||
|
||||
.icon-recycle {
|
||||
-webkit-mask-image: url(./html/svg/recycle-line.svg);
|
||||
}
|
||||
|
||||
.icon-equalize {
|
||||
-webkit-mask-image: url(./html/svg/equalizer-line.svg);
|
||||
}
|
||||
|
||||
.icon-bug {
|
||||
-webkit-mask-image: url(./html/svg/bug-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-prompt {
|
||||
-webkit-mask-image: url(./html/svg/edit-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-arrow-down {
|
||||
-webkit-mask-image: url(./html/svg/arrow-down-s-line.svg);
|
||||
}
|
||||
|
||||
.icon-arrow-up {
|
||||
-webkit-mask-image: url(./html/svg/arrow-up-s-line.svg);
|
||||
}
|
||||
|
||||
|
||||
.icon-checkpoints {
|
||||
-webkit-mask-image: url(./html/svg/sparkling-line.svg);
|
||||
}
|
||||
|
||||
.icon-textual-inversion {
|
||||
-webkit-mask-image: url(./html/svg/focus-line.svg);
|
||||
}
|
||||
|
||||
.icon-hypernetworks {
|
||||
-webkit-mask-image: url(./html/svg/focus-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-lora {
|
||||
-webkit-mask-image: url(./html/svg/focus-2-fill.svg);
|
||||
}
|
||||
|
||||
.icon-quicksettings {
|
||||
-webkit-mask-image: url(./html/svg/list-settings-line.svg);
|
||||
}
|
||||
|
||||
.icon-pnginfo {
|
||||
-webkit-mask-image: url(./html/svg/image-add-line.svg);
|
||||
}
|
||||
|
||||
.icon-extensions {
|
||||
-webkit-mask-image: url(./html/svg/box-3-line.svg);
|
||||
}
|
||||
|
||||
.icon-theme {
|
||||
-webkit-mask-image: url(./html/svg/contrast-drop-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-settings {
|
||||
-webkit-mask-image: url(./html/svg/settings-3-line.svg);
|
||||
}
|
||||
|
||||
.icon-app-logo {
|
||||
-webkit-mask-image: url(./html/SDNext_Logo.svg);
|
||||
}
|
||||
|
||||
.icon-txt2img {
|
||||
-webkit-mask-image: url(./html/svg/t-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-img2img {
|
||||
-webkit-mask-image: url(./html/svg/image-line.svg);
|
||||
}
|
||||
|
||||
.icon-extras {
|
||||
transform: scaleX(-1);
|
||||
-webkit-mask-image: url(./html/svg/picture-in-picture-exit-line.svg);
|
||||
}
|
||||
|
||||
.icon-model-merger {
|
||||
transform: rotate(90deg);
|
||||
-webkit-mask-image: url(./html/svg/organization-chart.svg);
|
||||
}
|
||||
|
||||
.icon-train {
|
||||
-webkit-mask-image: url(./html/svg/robot-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-image-edit {
|
||||
-webkit-mask-image: url(./html/svg/image-edit-line.svg);
|
||||
}
|
||||
|
||||
.icon-ruler {
|
||||
-webkit-mask-image: url(./html/svg/ruler-2-line.svg);
|
||||
}
|
||||
|
||||
.question-answer {
|
||||
-webkit-mask-image: url(./html/svg/question-answer-line.svg);
|
||||
}
|
||||
|
||||
.icon-install {
|
||||
-webkit-mask-image: url(./html/svg/install-line.svg);
|
||||
}
|
||||
|
||||
.star_count:before {
|
||||
content: "";
|
||||
-webkit-mask-image: url(./html/svg/star-line.svg);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--ae-primary-color);
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.icon-rocket {
|
||||
-webkit-mask-image: url(./html/svg/rocket-fill.svg);
|
||||
}
|
||||
|
||||
.icon-github {
|
||||
-webkit-mask-image: url(./html/svg/github-fill.svg);
|
||||
}
|
||||
|
||||
.icon-reload {
|
||||
-webkit-mask-image: url(./html/svg/restart-fill.svg);
|
||||
}
|
||||
|
||||
.icon-gradio {
|
||||
-webkit-mask-image: url(./html/svg/gradio-fill.svg);
|
||||
}
|
||||
|
||||
.icon-sort {
|
||||
-webkit-mask-image: url(./html/svg/sort-asc.svg);
|
||||
}
|
||||
|
||||
button.active .icon-sort {
|
||||
-webkit-mask-image: url(./html/svg/sort-desc.svg);
|
||||
}
|
||||
|
||||
.icon-cancel {
|
||||
-webkit-mask-image: url(./html/svg/close-line.svg);
|
||||
}
|
||||
|
||||
.icon-terminal {
|
||||
-webkit-mask-image: url(./html/svg/terminal-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-dock {
|
||||
-webkit-mask-image: url(./html/svg/layout-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-trophy {
|
||||
-webkit-mask-image: url(./html/svg/trophy-line.svg);
|
||||
}
|
||||
|
||||
.icon-vip {
|
||||
-webkit-mask-image: url(./html/svg/vip-diamond-line.svg);
|
||||
}
|
||||
|
||||
.icon-contributors {
|
||||
-webkit-mask-image: url(./html/svg/team-line.svg);
|
||||
}
|
||||
|
||||
.icon-results {
|
||||
-webkit-mask-image: url(./html/svg/computer-line.svg);
|
||||
}
|
||||
|
||||
.icon-menuadd {
|
||||
-webkit-mask-image: url(./html/svg/menu-add-fill.svg);
|
||||
}
|
||||
|
||||
.icon-deforum {
|
||||
-webkit-mask-image: url(./html/svg/film-line.svg);
|
||||
}
|
||||
|
||||
.icon-video {
|
||||
-webkit-mask-image: url(./html/svg/video-line.svg);
|
||||
}
|
||||
|
||||
.icon-profile {
|
||||
-webkit-mask-image: url(./html/svg/profile-line.svg);
|
||||
}
|
||||
4
extensions-builtin/sd-webui-ux/.gitignore
vendored
Normal file
4
extensions-builtin/sd-webui-ux/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
__pycache__
|
||||
package-lock.json
|
||||
node_modules
|
||||
temp
|
||||
7
extensions-builtin/sd-webui-ux/CITATION.cff
Normal file
7
extensions-builtin/sd-webui-ux/CITATION.cff
Normal file
@@ -0,0 +1,7 @@
|
||||
cff-version: 1.2.0
|
||||
message: "If you use this software, please cite it as below."
|
||||
authors:
|
||||
- given-names: Anapnoe
|
||||
title: "SD Web UI-UX"
|
||||
date-released: 2024-10-09
|
||||
url: "https://github.com/anapnoe/sd-webui-ux"
|
||||
674
extensions-builtin/sd-webui-ux/LICENSE
Normal file
674
extensions-builtin/sd-webui-ux/LICENSE
Normal file
@@ -0,0 +1,674 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU General Public License is a free, copyleft license for
|
||||
software and other kinds of works.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
the GNU General Public License is intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users. We, the Free Software Foundation, use the
|
||||
GNU General Public License for most of our software; it applies also to
|
||||
any other work released this way by its authors. You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to prevent others from denying you
|
||||
these rights or asking you to surrender the rights. Therefore, you have
|
||||
certain responsibilities if you distribute copies of the software, or if
|
||||
you modify it: responsibilities to respect the freedom of others.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must pass on to the recipients the same
|
||||
freedoms that you received. You must make sure that they, too, receive
|
||||
or can get the source code. And you must show them these terms so they
|
||||
know their rights.
|
||||
|
||||
Developers that use the GNU GPL protect your rights with two steps:
|
||||
(1) assert copyright on the software, and (2) offer you this License
|
||||
giving you legal permission to copy, distribute and/or modify it.
|
||||
|
||||
For the developers' and authors' protection, the GPL clearly explains
|
||||
that there is no warranty for this free software. For both users' and
|
||||
authors' sake, the GPL requires that modified versions be marked as
|
||||
changed, so that their problems will not be attributed erroneously to
|
||||
authors of previous versions.
|
||||
|
||||
Some devices are designed to deny users access to install or run
|
||||
modified versions of the software inside them, although the manufacturer
|
||||
can do so. This is fundamentally incompatible with the aim of
|
||||
protecting users' freedom to change the software. The systematic
|
||||
pattern of such abuse occurs in the area of products for individuals to
|
||||
use, which is precisely where it is most unacceptable. Therefore, we
|
||||
have designed this version of the GPL to prohibit the practice for those
|
||||
products. If such problems arise substantially in other domains, we
|
||||
stand ready to extend this provision to those domains in future versions
|
||||
of the GPL, as needed to protect the freedom of users.
|
||||
|
||||
Finally, every program is threatened constantly by software patents.
|
||||
States should not allow patents to restrict development and use of
|
||||
software on general-purpose computers, but in those that do, we wish to
|
||||
avoid the special danger that patents applied to a free program could
|
||||
make it effectively proprietary. To prevent this, the GPL assures that
|
||||
patents cannot be used to render the program non-free.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Use with the GNU Affero General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU Affero General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the special requirements of the GNU Affero General Public License,
|
||||
section 13, concerning interaction through a network will apply to the
|
||||
combination as such.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program does terminal interaction, make it output a short
|
||||
notice like this when it starts in an interactive mode:
|
||||
|
||||
<program> Copyright (C) <year> <name of author>
|
||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, your program's commands
|
||||
might be different; for a GUI interface, you would use an "about box".
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU GPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
|
||||
The GNU General Public License does not permit incorporating your program
|
||||
into proprietary programs. If your program is a subroutine library, you
|
||||
may consider it more useful to permit linking proprietary applications with
|
||||
the library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License. But first, please read
|
||||
<https://www.gnu.org/licenses/why-not-lgpl.html>.
|
||||
65
extensions-builtin/sd-webui-ux/README.md
Normal file
65
extensions-builtin/sd-webui-ux/README.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# 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.
|
||||
|
||||
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).
|
||||
|
||||
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.
|
||||
|
||||
[🌟 Your Support Makes a Difference! 🌟](https://buymeacoffee.com/dayanbayah)
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
## 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.
|
||||
- **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.
|
||||
- **Enhanced Usability for Sliders**: Input range sliders support tick marks for improved interaction.
|
||||
- **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
|
||||
- **Infinite Image Browsing Extension**
|
||||
- **Deforum Extension**
|
||||
- **Prompt-All-In-One Extension**
|
||||
- **Aspect-Ratio-Helper Extension**
|
||||
|
||||
## Installation
|
||||
- **Open the Extensions tab in SD-webui.**
|
||||
- **Select the Install from URL option.**
|
||||
- **Enter `https://github.com/anapnoe/sd-webui-ux.git`**
|
||||
- **Click on the Install button.**
|
||||
- **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.
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
|
||||
|
||||
|
||||
## Workspaces UI-UX (in progress)(upcoming extension)
|
||||
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)
|
||||
|
||||
|
||||
|
||||
|
||||
3970
extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css
Normal file
3970
extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css
Normal file
File diff suppressed because it is too large
Load Diff
159
extensions-builtin/sd-webui-ux/assets/css/uiux-extentions.css
Normal file
159
extensions-builtin/sd-webui-ux/assets/css/uiux-extentions.css
Normal file
@@ -0,0 +1,159 @@
|
||||
* #extensions_installed_top {
|
||||
display: flex !important;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tabs_extensions table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs_extensions thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs_extensions tbody {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: var(--ae-gap-size);
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
.tabs_extensions tr {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
padding: var(--ae-panel-padding);
|
||||
background-color: var(--ae-panel-bg-color);
|
||||
gap: 5px;
|
||||
border: var(--ae-border-size) solid var(--ae-panel-border-color);
|
||||
border-radius: var(--ae-border-radius);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabs_extensions td {
|
||||
display: flex;
|
||||
text-wrap: wrap;
|
||||
flex-direction: row;
|
||||
overflow-wrap: anywhere;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tabs_extensions td:has(p.info) {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tabs_extensions td p.info:has(span) {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
flex-grow: 0;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tabs_extensions span.date_added {
|
||||
max-width: 130px;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
color: var(--ae-secondary-label-color);
|
||||
background-color: var(--ae-input-bg-color);
|
||||
padding: var(--ae-panel-padding);
|
||||
border-radius: var(--ae-border-radius);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
span.star_count {
|
||||
background-color: var(--ae-input-bg-color);
|
||||
padding: 5px 10px 5px 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
justify-items: end;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span.star_count b {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabs_extensions td br {
|
||||
flex-basis: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tabs_extensions td a {
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabs_extensions td button {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabs_extensions td label:has(input) {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabs_extensions td label>input {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.tabs_extensions tr:has(a[href=""]) {
|
||||
background-color: var(--ae-input-bg-color);
|
||||
border-color: var(--ae-input-border-color);
|
||||
}
|
||||
|
||||
.tabs_extensions td:empty,
|
||||
.tabs_extensions td:has(a:empty) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tabs_extensions td:nth-child(1) a,
|
||||
.tabs_extensions td:nth-child(2) a {
|
||||
background-color: transparent;
|
||||
color: var(--ae-primary-color);
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabs_extensions td:nth-child(1) a:hover,
|
||||
.tabs_extensions td:nth-child(2) a:hover {
|
||||
color: var(--ae-label-color);
|
||||
}
|
||||
|
||||
.tabs_extensions td:nth-child(1) a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span.settings-category {
|
||||
padding: 0 var(--ae-input-padding);
|
||||
font-weight: bold;
|
||||
line-height: var(--ae-input-height);
|
||||
color: var(--ae-primary-color);
|
||||
}
|
||||
|
||||
#extensions_disable_all {
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
#extensions_installed_top>button:nth-child(1),
|
||||
#extensions_installed_top>button:nth-child(2) {
|
||||
width: max(140px, 40%);
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
[id$=edit_user_metadata] {
|
||||
gap: var(--ae-gap-size);
|
||||
text-align: left
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .gradio-column.gap {
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
width: auto
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .gradio-column.gap:first-child {
|
||||
flex-grow: 100
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .extra-network-name {
|
||||
font-size: 16px;
|
||||
flex-grow: 0
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .extra-network-name+.form,
|
||||
[id$=edit_user_metadata] .extra-network-name+.form label,
|
||||
[id$=edit_user_metadata] .extra-network-name+.form textarea {
|
||||
flex-grow: 10
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .extra-network-name+.form .gradio-textbox,
|
||||
[id$=edit_user_metadata] .extra-network-name~.form .gradio-dropdown {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .gradio-column.gap:has(img) {
|
||||
line-height: 0
|
||||
}
|
||||
|
||||
[id$=edit_user_metadata] .scroll-hide {
|
||||
overflow-y: auto !important
|
||||
}
|
||||
|
||||
.extra-network-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(calc(var(--ae-uiux_exnet_fit_size)*1px), 1fr));
|
||||
gap: var(--ae-gap-size)
|
||||
}
|
||||
|
||||
.extra-network-cards .card {
|
||||
display: block;
|
||||
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)
|
||||
}
|
||||
|
||||
.extra-network-cards .card img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--ae-border-radius);
|
||||
transform: scale(1.1);
|
||||
pointer-events: none;
|
||||
object-position: center
|
||||
}
|
||||
|
||||
.extra-network-cards .card:hover .button-row {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.extra-network-cards .card:hover {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.extra-network-cards .card .button-row {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: var(--ae-input-bg-color);
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
.extra-network-cards .card .card-button:hover,
|
||||
.extra-network-tree .tree-list-content .button-row>div:hover {
|
||||
background-color: var(--ae-primary-color)
|
||||
}
|
||||
|
||||
.extra-network-cards .card .card-button {
|
||||
background-color: var(--ae-label-color);
|
||||
width: 24px;
|
||||
height: 24px
|
||||
}
|
||||
|
||||
.extra-network-settings .gradio-slider .head {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.extra-network-subdirs>button,
|
||||
.settings-tabs button {
|
||||
text-align: left;
|
||||
font-size: 98%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.extra-network-subdirs,
|
||||
.settings-tabs .tab-nav {
|
||||
gap: 1px;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#template-settings .split-container:first-child,
|
||||
.layout-extra-networks .split-container:first-child {
|
||||
min-width: 135px
|
||||
}
|
||||
|
||||
#split-right:not(.v-expand) {
|
||||
min-width: 512px
|
||||
}
|
||||
|
||||
.layout-extra-networks:has(.show-dirs) .gutter,
|
||||
.layout-extra-networks:has(.show-dirs) .split-container:first-child {
|
||||
display: none
|
||||
}
|
||||
|
||||
.layout-extra-networks:has(.show-dirs:not(.active)) .split-container {
|
||||
flex-basis: 100% !important
|
||||
}
|
||||
|
||||
.layout-extra-networks:has(.show-dirs.active) .gutter,
|
||||
.layout-extra-networks:has(.show-dirs.active) .split-container:first-child {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.layout-extra-networks {
|
||||
gap: 2px
|
||||
}
|
||||
|
||||
.layout-extra-networks>div:first-child {
|
||||
padding-bottom: 0 !important
|
||||
}
|
||||
|
||||
.extra-network-tree.hidden {
|
||||
display: flex !important;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
grid-template-rows: min-content;
|
||||
grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
|
||||
grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
|
||||
grid-gap: 10px;
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content>span {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content+.tree-list--subgroup {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-item-label--truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list--subgroup>.tree-list-item {
|
||||
margin-left: 5px !important;
|
||||
padding-left: 5px !important;
|
||||
list-style: none;
|
||||
line-height: calc(var(--ae-input-font-size) + 2px)
|
||||
}
|
||||
|
||||
.tree-list-item-action-chevron {
|
||||
display: inline-flex;
|
||||
padding: .25rem;
|
||||
box-shadow: .1rem .1rem 0 0 var(--ae-primary-color) inset;
|
||||
transform: rotate(135deg)
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content-dir .tree-list-item-action-chevron {
|
||||
-ms-transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
transition: transform .2s
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content-dir[data-expanded] .tree-list-item-action-chevron {
|
||||
-ms-transform: rotate(225deg);
|
||||
-webkit-transform: rotate(225deg);
|
||||
transform: rotate(225deg);
|
||||
transition: transform .2s
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content-file .tree-list-item-action--leading {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content .button-row {
|
||||
display: none;
|
||||
pointer-events: all
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content:hover .button-row {
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-content .button-row>div {
|
||||
width: calc(var(--ae-input-font-size) + 2px);
|
||||
height: calc(var(--ae-input-font-size) + 2px);
|
||||
background-color: var(--ae-label-color)
|
||||
}
|
||||
|
||||
.extra-network-tree .tree-list-item-action--trailing {
|
||||
grid-area: trailing-action;
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
.extra-network-tree div.tree-list-content:hover {
|
||||
color: var(--ae-primary-color);
|
||||
transition: none
|
||||
}
|
||||
|
||||
.search_extra_networks {
|
||||
min-width: 100px;
|
||||
flex: 1 1 0
|
||||
}
|
||||
|
||||
.additional,
|
||||
.additional ul {
|
||||
display: none !important;
|
||||
padding: 0;
|
||||
gap: 5px;
|
||||
margin: auto auto 2px
|
||||
}
|
||||
|
||||
.actions,
|
||||
.card:hover .additional,
|
||||
.card:hover .additional ul {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.additional ul a {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 125% !important;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 !important
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 10px;
|
||||
background-color: var(--ae-main-bg-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
span.name {
|
||||
overflow-wrap: anywhere;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
color: var(--ae-label-color);
|
||||
text-align: center
|
||||
}
|
||||
|
||||
span.description {
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
display: block;
|
||||
max-height: 80px;
|
||||
overflow: hidden;
|
||||
opacity: .6
|
||||
}
|
||||
|
||||
.card.selected {
|
||||
border: var(--ae-border-size) solid var(--ae-primary-color);
|
||||
}
|
||||
|
||||
.card.selected .actions {
|
||||
background-color: var(--ae-primary-color);
|
||||
}
|
||||
|
||||
.selected span.name {
|
||||
color: var(--ae-input-hover-text-color);
|
||||
}
|
||||
|
||||
.extra-network-tree ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
297
extensions-builtin/sd-webui-ux/assets/css/uiux-gradio.css
Normal file
297
extensions-builtin/sd-webui-ux/assets/css/uiux-gradio.css
Normal file
@@ -0,0 +1,297 @@
|
||||
*.gradio-slider .head {
|
||||
margin-bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto 70px;
|
||||
}
|
||||
|
||||
*.gradio-slider input[type="range"] {
|
||||
height: calc(var(--ae-input-height) * var(--ae-input-slider-height));
|
||||
width: 100%;
|
||||
min-height: calc(var(--ae-input-height) * var(--ae-input-slider-height));
|
||||
margin-bottom: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5);
|
||||
margin-top: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* .no-slider-layout .gradio-slider input[type="range"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* .no-slider-layout .gradio-slider .head {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
* .no-slider-layout .gradio-slider input[type="number"] {
|
||||
line-height: var(--ae-input-line-height);
|
||||
font-size: var(--ae-input-font-size);
|
||||
padding: var(--ae-input-padding);
|
||||
margin: 0;
|
||||
min-height: var(--ae-input-height);
|
||||
}
|
||||
|
||||
|
||||
*.gradio-slider input[type="number"] {
|
||||
line-height: 16px;
|
||||
min-height: 22px;
|
||||
max-height: 22px;
|
||||
margin-top: 0px;
|
||||
width: auto;
|
||||
font-family: inherit;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
|
||||
*.gradio-dropdown label {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
*.gradio-dropdown div.wrap,
|
||||
* input,
|
||||
* textarea,
|
||||
* button {
|
||||
background: var(--ae-input-bg-color);
|
||||
border: var(--ae-input-border-size) solid var(--ae-input-border-color);
|
||||
border-radius: var(--ae-border-radius);
|
||||
vertical-align: middle;
|
||||
line-height: var(--ae-input-line-height);
|
||||
font-size: var(--ae-input-font-size);
|
||||
padding: var(--ae-input-padding);
|
||||
color: var(--ae-input-text-color);
|
||||
margin: 0;
|
||||
min-height: var(--ae-input-height);
|
||||
}
|
||||
|
||||
* select:focus,
|
||||
* input:focus,
|
||||
* button:focus,
|
||||
* textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--ae-primary-color);
|
||||
}
|
||||
|
||||
*.gradio-dropdown input:focus {
|
||||
outline: var(--ae-input-border-size) solid var(--ae-primary-color);
|
||||
}
|
||||
|
||||
*.gradio-dropdown {
|
||||
overflow: visible !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
*.gradio-dropdown .secondary-wrap input {
|
||||
border: none !important;
|
||||
background: none;
|
||||
min-height: unset;
|
||||
line-height: calc(var(--ae-input-icon-height) - 10px);
|
||||
flex-grow: 1;
|
||||
min-height: calc(var(--ae-input-height) - (var(--ae-input-border-size) * 2));
|
||||
}
|
||||
|
||||
*.gradio-dropdown .secondary-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
gap: var(--ae-gap-size-val);
|
||||
padding-right: var(--ae-input-height);
|
||||
}
|
||||
|
||||
*.gradio-dropdown div.wrap {
|
||||
background: var(--ae-input-bg-color);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
pointer-events: all;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
*.gradio-dropdown label>span {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
*.gradio-dropdown label>* {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* svg.dropdown-arrow {
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
fill: var(--ae-input-text-color);
|
||||
}
|
||||
|
||||
* .gradio-dropdown input {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
ul.options {
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
margin: 0px !important;
|
||||
box-shadow: none;
|
||||
border-radius: var(--ae-border-radius);
|
||||
background: var(--ae-main-bg-color);
|
||||
min-width: fit-content;
|
||||
max-width: 50vh;
|
||||
max-height: 25vh !important;
|
||||
overflow: auto;
|
||||
color: var(--ae-label-color);
|
||||
list-style: none;
|
||||
top: var(--ae-input-height) !important;
|
||||
margin-top: calc(var(--ae-border-size) * -1) !important;
|
||||
bottom: unset !important;
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
outline: var(--ae-border-size) solid var(--ae-input-border-color);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
li.item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: var(--ae-panel-padding);
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.item.active {
|
||||
background: var(--ae-primary-color);
|
||||
color: var(--ae-input-hover-text-color);
|
||||
}
|
||||
|
||||
li.item span {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
*.gradio-textbox label {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
*.gradio-slider label {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
*.gradio-accordion .label-wrap {
|
||||
min-height: var(--ae-input-height);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: var(--ae-panel-padding) calc(var(--ae-panel-padding) + 4px);
|
||||
border-radius: var(--ae-border-radius);
|
||||
outline: var(--ae-border-size) solid var(--ae-panel-border-color);
|
||||
background-color: var(--ae-input-bg-color);
|
||||
color: var(--ae-primary-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
*.gradio-accordion .label-wrap.open {
|
||||
margin-bottom: calc(var(--ae-panel-padding) - var(--ae-border-size));
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
/* background-color: var(--ae-panel-bg-color);
|
||||
outline-color: var(--ae-primary-color); */
|
||||
}
|
||||
|
||||
.gradio-accordion:has(> .open) {
|
||||
/* outline: var(--ae-border-size) solid var(--ae-primary-color) !important; */
|
||||
background-color: var(--ae-input-bg-color);
|
||||
outline: var(--ae-border-size) solid var(--ae-panel-border-color);
|
||||
border-radius: var(--ae-border-radius);
|
||||
position: relative;
|
||||
outline-offset: 0px;
|
||||
}
|
||||
|
||||
.gradio-accordion>div>.gap {
|
||||
padding: var(--ae-panel-padding);
|
||||
}
|
||||
|
||||
|
||||
.portal:has(.gradio-accordion) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.portal .gradio-accordion div:has([id^='setting_']) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex: 1 1 0%;
|
||||
min-width: min(160px, 100%);
|
||||
}
|
||||
|
||||
.portal .gradio-accordion .gradio-row:has([id^='setting_']) {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
.gradio-accordion .label-wrap>span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gradio-accordion .label-wrap:not(.open)>span.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
*.gradio-checkboxgroup label,
|
||||
*.gradio-radio label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: none;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
gap: 1px;
|
||||
flex: 0 1 0%;
|
||||
background: var(--ae-input-bg-color);
|
||||
border: var(--ae-input-border-size) solid var(--ae-input-border-color);
|
||||
border-radius: var(--ae-border-radius);
|
||||
vertical-align: middle;
|
||||
line-height: var(--ae-input-line-height);
|
||||
font-size: var(--ae-input-font-size);
|
||||
padding: var(--ae-input-padding);
|
||||
color: var(--ae-input-text-color);
|
||||
margin: 0;
|
||||
min-height: var(--ae-input-height);
|
||||
}
|
||||
|
||||
*.gradio-checkboxgroup span,
|
||||
*.gradio-radio label span {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*.gradio-checkboxgroup .wrap,
|
||||
*.gradio-radio .wrap {
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
*.gradio-checkboxgroup>span,
|
||||
*.gradio-radio>span {
|
||||
border: var(--ae-input-border-size) solid transparent;
|
||||
margin-bottom: 5px;
|
||||
vertical-align: middle;
|
||||
margin-top: 0;
|
||||
color: var(--ae-label-color);
|
||||
font-family: inherit;
|
||||
line-height: var(--ae-input-font-size);
|
||||
font-size: var(--ae-input-font-size);
|
||||
}
|
||||
305
extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css
Normal file
305
extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css
Normal file
@@ -0,0 +1,305 @@
|
||||
*.copy-path-button {
|
||||
-webkit-mask-image: url(../svg/clipboard-fill.svg);
|
||||
}
|
||||
|
||||
*.metadata-button {
|
||||
-webkit-mask-image: url(../svg/file-info-fill.svg);
|
||||
}
|
||||
|
||||
*.edit-button.card-button {
|
||||
-webkit-mask-image: url(../svg/file-edit-fill.svg);
|
||||
}
|
||||
|
||||
.icon-folder {
|
||||
-webkit-mask-image: url(../svg/folder-open-line.svg);
|
||||
}
|
||||
|
||||
.icon-save {
|
||||
-webkit-mask-image: url(../svg/save-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-zip {
|
||||
-webkit-mask-image: url(../svg/file-zip-line.svg);
|
||||
}
|
||||
|
||||
.icon-2txt2img {
|
||||
-webkit-mask-image: url(../svg/t-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-2inpaint {
|
||||
-webkit-mask-image: url(../svg/paint-brush-line.svg);
|
||||
}
|
||||
|
||||
.gradio-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;
|
||||
}
|
||||
|
||||
.icon-2extras {
|
||||
transform: scaleX(-1);
|
||||
-webkit-mask-image: url(../svg/picture-in-picture-exit-line.svg);
|
||||
}
|
||||
|
||||
.icon-2img2img {
|
||||
-webkit-mask-image: url(../svg/image-line.svg);
|
||||
}
|
||||
|
||||
.refresh {
|
||||
-webkit-mask-image: url(../svg/loop-right-line.svg);
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
-webkit-mask-image: url(../svg/information-line.svg);
|
||||
}
|
||||
|
||||
.icon-crop {
|
||||
-webkit-mask-image: url(../svg/crop-line.svg);
|
||||
}
|
||||
|
||||
.icon-res-switch {
|
||||
-webkit-mask-image: url(../svg/arrow-up-down-line.svg);
|
||||
}
|
||||
|
||||
.icon-scripts {
|
||||
-webkit-mask-image: url(../svg/plug-line.svg);
|
||||
}
|
||||
|
||||
.icon-generate {
|
||||
-webkit-mask-image: url(../svg/ai-generate.svg);
|
||||
}
|
||||
|
||||
.icon-skip {
|
||||
-webkit-mask-image: url(../svg/skip-forward-line.svg);
|
||||
}
|
||||
|
||||
.icon-stop {
|
||||
-webkit-mask-image: url(../svg/stop-circle-line.svg);
|
||||
}
|
||||
|
||||
.icon-loop {
|
||||
-webkit-mask-image: url(../svg/infinity-fill.svg);
|
||||
}
|
||||
|
||||
.icon-node-tree {
|
||||
-webkit-mask-image: url(../svg/node-tree.svg);
|
||||
}
|
||||
|
||||
.icon-magic {
|
||||
-webkit-mask-image: url(../svg/magic-line.svg);
|
||||
}
|
||||
|
||||
.icon-delete {
|
||||
-webkit-mask-image: url(../svg/delete-bin-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-styles-edit {
|
||||
-webkit-mask-image: url(../svg/draft-line.svg);
|
||||
}
|
||||
|
||||
.icon-styles-apply {
|
||||
-webkit-mask-image: url(../svg/bill-line.svg);
|
||||
}
|
||||
|
||||
.icon-dice {
|
||||
-webkit-mask-image: url(../svg/dice-1.svg);
|
||||
}
|
||||
|
||||
.icon-recycle {
|
||||
-webkit-mask-image: url(../svg/recycle-line.svg);
|
||||
}
|
||||
|
||||
.icon-equalize {
|
||||
-webkit-mask-image: url(../svg/equalizer-line.svg);
|
||||
}
|
||||
|
||||
.icon-bug {
|
||||
-webkit-mask-image: url(../svg/bug-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-prompt {
|
||||
-webkit-mask-image: url(../svg/edit-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-arrow-down {
|
||||
-webkit-mask-image: url(../svg/arrow-down-s-line.svg);
|
||||
}
|
||||
|
||||
.icon-arrow-up {
|
||||
-webkit-mask-image: url(../svg/arrow-up-s-line.svg);
|
||||
}
|
||||
|
||||
|
||||
.icon-checkpoints {
|
||||
-webkit-mask-image: url(../svg/sparkling-line.svg);
|
||||
}
|
||||
|
||||
.icon-textual-inversion {
|
||||
-webkit-mask-image: url(../svg/focus-line.svg);
|
||||
}
|
||||
|
||||
.icon-hypernetworks {
|
||||
-webkit-mask-image: url(../svg/focus-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-lora {
|
||||
-webkit-mask-image: url(../svg/focus-2-fill.svg);
|
||||
}
|
||||
|
||||
.icon-quicksettings {
|
||||
-webkit-mask-image: url(../svg/list-settings-line.svg);
|
||||
}
|
||||
|
||||
.icon-pnginfo {
|
||||
-webkit-mask-image: url(../svg/image-add-line.svg);
|
||||
}
|
||||
|
||||
.icon-extensions {
|
||||
-webkit-mask-image: url(../svg/box-3-line.svg);
|
||||
}
|
||||
|
||||
.icon-theme {
|
||||
-webkit-mask-image: url(../svg/contrast-drop-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-settings {
|
||||
-webkit-mask-image: url(../svg/settings-3-line.svg);
|
||||
}
|
||||
|
||||
.icon-app-logo {
|
||||
-webkit-mask-image: url(../SDNext_Logo.svg);
|
||||
}
|
||||
|
||||
.icon-txt2img {
|
||||
-webkit-mask-image: url(../svg/t-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-img2img {
|
||||
-webkit-mask-image: url(../svg/image-line.svg);
|
||||
}
|
||||
|
||||
.icon-extras {
|
||||
transform: scaleX(-1);
|
||||
-webkit-mask-image: url(../svg/picture-in-picture-exit-line.svg);
|
||||
}
|
||||
|
||||
.icon-model-merger {
|
||||
transform: rotate(90deg);
|
||||
-webkit-mask-image: url(../svg/organization-chart.svg);
|
||||
}
|
||||
|
||||
.icon-train {
|
||||
-webkit-mask-image: url(../svg/robot-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-image-edit {
|
||||
-webkit-mask-image: url(../svg/image-edit-line.svg);
|
||||
}
|
||||
|
||||
.icon-ruler {
|
||||
-webkit-mask-image: url(../svg/ruler-2-line.svg);
|
||||
}
|
||||
|
||||
.question-answer {
|
||||
-webkit-mask-image: url(../svg/question-answer-line.svg);
|
||||
}
|
||||
|
||||
.icon-install {
|
||||
-webkit-mask-image: url(../svg/install-line.svg);
|
||||
}
|
||||
|
||||
.star_count:before {
|
||||
content: "";
|
||||
-webkit-mask-image: url(../svg/star-line.svg);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--ae-primary-color);
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.icon-rocket {
|
||||
-webkit-mask-image: url(../svg/rocket-fill.svg);
|
||||
}
|
||||
|
||||
.icon-github {
|
||||
-webkit-mask-image: url(../svg/github-fill.svg);
|
||||
}
|
||||
|
||||
.icon-reload {
|
||||
-webkit-mask-image: url(../svg/restart-fill.svg);
|
||||
}
|
||||
|
||||
.icon-gradio {
|
||||
-webkit-mask-image: url(../svg/gradio-fill.svg);
|
||||
}
|
||||
|
||||
.icon-sort {
|
||||
-webkit-mask-image: url(../svg/sort-asc.svg);
|
||||
}
|
||||
|
||||
button.active .icon-sort {
|
||||
-webkit-mask-image: url(../svg/sort-desc.svg);
|
||||
}
|
||||
|
||||
.icon-cancel {
|
||||
-webkit-mask-image: url(../svg/close-line.svg);
|
||||
}
|
||||
|
||||
.icon-terminal {
|
||||
-webkit-mask-image: url(../svg/terminal-box-line.svg);
|
||||
}
|
||||
|
||||
.icon-dock {
|
||||
-webkit-mask-image: url(../svg/layout-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-trophy {
|
||||
-webkit-mask-image: url(../svg/trophy-line.svg);
|
||||
}
|
||||
|
||||
.icon-vip {
|
||||
-webkit-mask-image: url(../svg/vip-diamond-line.svg);
|
||||
}
|
||||
|
||||
.icon-contributors {
|
||||
-webkit-mask-image: url(../svg/team-line.svg);
|
||||
}
|
||||
|
||||
.icon-results {
|
||||
-webkit-mask-image: url(../svg/computer-line.svg);
|
||||
}
|
||||
|
||||
.icon-menuadd {
|
||||
-webkit-mask-image: url(../svg/menu-add-fill.svg);
|
||||
}
|
||||
|
||||
.icon-deforum {
|
||||
-webkit-mask-image: url(../svg/film-line.svg);
|
||||
}
|
||||
|
||||
.icon-video {
|
||||
-webkit-mask-image: url(../svg/video-line.svg);
|
||||
}
|
||||
|
||||
.icon-profile {
|
||||
-webkit-mask-image: url(../svg/profile-line.svg);
|
||||
}
|
||||
|
||||
.icon-spaces {
|
||||
-webkit-mask-image: url(../svg/function-add-line.svg);
|
||||
}
|
||||
|
||||
.icon-movie {
|
||||
-webkit-mask-image: url(../svg/movie-2-line.svg);
|
||||
}
|
||||
|
||||
.icon-folder-image {
|
||||
-webkit-mask-image: url(../svg/folder-image-line.svg);
|
||||
}
|
||||
|
||||
.icon-gallery {
|
||||
-webkit-mask-image: url(../svg/gallery-line.svg);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
:root body {
|
||||
--zp-primary: var(--ae-primary-color) !important;
|
||||
--zp-secondary: var(--ae-secondary-color) !important;
|
||||
--zp-tertiary: var(--ae-secondary-color) !important;
|
||||
--zp-primary-background: var(--ae-panel-bg-color) !important;
|
||||
--zp-secondary-background: var(--ae-panel-bg-color) !important;
|
||||
--zp-secondary-variant-background: var(--ae-input-bg-color) !important;
|
||||
--zp-tertiary-background: var(--ae-input-bg-color) !important;
|
||||
--zp-secondary: var(--ae-primary-color) !important;
|
||||
--zp-tertiary: var(--ae-primary-color) !important;
|
||||
--zp-primary-background: var(--ae-main-bg-color) !important;
|
||||
--zp-secondary-background: var(--ae-main-bg-color) !important;
|
||||
--zp-secondary-variant-background: var(--ae-main-bg-color) !important;
|
||||
--zp-tertiary-background: var(--ae-main-bg-color) !important;
|
||||
--zp-border: var(--ae-input-border-color) !important;
|
||||
--zp-icon-bg: var(--ae-primary-color) !important;
|
||||
}
|
||||
@@ -73,7 +73,7 @@ li.file.grid .preview-icon-wrap {
|
||||
}
|
||||
|
||||
.ant-dropdown-menu {
|
||||
background-color: var(--ae-input-bg-color) !important;
|
||||
background-color: var(--ae-main-bg-color) !important;
|
||||
|
||||
}
|
||||
|
||||
@@ -198,4 +198,19 @@ h6 {
|
||||
|
||||
.ant-tabs-tab-active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#infinite_image_browsing_container_wrapper,
|
||||
#iibrowser_tabitem iframe,
|
||||
#iibrowser_tabitem .portal,
|
||||
#iibrowser_tabitem .gradio-row,
|
||||
#iibrowser_tabitem .gradio-col,
|
||||
#iibrowser_tabitem .gap {
|
||||
flex: 1 1 100% !important;
|
||||
}
|
||||
|
||||
#iibrowser_tabitem .portal {
|
||||
padding: var(--ae-panel-padding);
|
||||
background-color: transparent;
|
||||
outline: 0;
|
||||
}
|
||||
53
extensions-builtin/sd-webui-ux/assets/css/uiux-logger.css
Normal file
53
extensions-builtin/sd-webui-ux/assets/css/uiux-logger.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.log-row {
|
||||
display: table;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.log-row a {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.log-date {
|
||||
color: #cacaca;
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
padding: 0px 10px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.log-boolean,
|
||||
.log-undefined {
|
||||
color: magenta;
|
||||
}
|
||||
|
||||
.log-object {
|
||||
color: #cfb0ff;
|
||||
}
|
||||
|
||||
.log-string {
|
||||
color: #ffca68;
|
||||
}
|
||||
|
||||
.log-number {
|
||||
color: cyan;
|
||||
}
|
||||
|
||||
.log-info {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.log-string.log-remove {
|
||||
color: #ff4f4f;
|
||||
}
|
||||
|
||||
.log-string.log-load {
|
||||
color: #74ff80;
|
||||
}
|
||||
|
||||
.log-string.log-url {
|
||||
color: #8fc9ff;
|
||||
}
|
||||
|
||||
.log-string.log-object {
|
||||
color: #8fc9ff;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.icon-physton {
|
||||
-webkit-mask-image: url(./html/svg/pantone-line.svg);
|
||||
-webkit-mask-image: url(../svg/pantone-line.svg);
|
||||
}
|
||||
|
||||
.physton-prompt {
|
||||
96
extensions-builtin/sd-webui-ux/assets/css/uiux-range.css
Normal file
96
extensions-builtin/sd-webui-ux/assets/css/uiux-range.css
Normal file
@@ -0,0 +1,96 @@
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="range"] {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--ae-input-bg-color);
|
||||
border: var(--ae-input-border-size) solid var(--ae-input-border-color);
|
||||
position: relative;
|
||||
border-radius: var(--ae-border-radius);
|
||||
}
|
||||
|
||||
input[type="range"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background-image: var(--ae-slider-bg-overlay);
|
||||
width: 100%;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: 14px;
|
||||
-webkit-appearance: none;
|
||||
color: var(--ae-primary-color);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 0px;
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
cursor: ew-resize;
|
||||
background-color: var(--ae-primary-color);
|
||||
box-shadow: -1024px 0 0 1024px var(--ae-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-color: var(--ae-panel-border-color) var(--ae-main-bg-color) !important;
|
||||
scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background-color: var(--ae-primary-color);
|
||||
height: 100%;
|
||||
background-image: var(--ae-slider-bg-overlay);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--ae-input-bg-color);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
position: relative;
|
||||
background-image: var(--ae-slider-bg-overlay);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
border: 0px solid var(--ae-primary-color);
|
||||
width: 0px;
|
||||
border-radius: 0%;
|
||||
background-color: var(--ae-primary-color);
|
||||
}
|
||||
|
||||
/*hide the outline behind the border*/
|
||||
input[type="range"]:-moz-focusring {
|
||||
outline: 1px solid var(--ae-primary-color);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
input[type="range"]:focus::-moz-range-track {
|
||||
background-color: var(--ae-input-bg-color);
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]:hover,
|
||||
input[type="number"]:focus {
|
||||
-moz-appearance: initial;
|
||||
}
|
||||
|
||||
/* IE maybe later */
|
||||
|
||||
input[type="range"]::-ms-fill-lower {
|
||||
background-color: var(--ae-primary-color);
|
||||
}
|
||||
|
||||
input[type="range"]::-ms-fill-upper {
|
||||
background-color: var(--ae-input-bg-color);
|
||||
}
|
||||
25
extensions-builtin/sd-webui-ux/assets/css/uiux-settings.css
Normal file
25
extensions-builtin/sd-webui-ux/assets/css/uiux-settings.css
Normal file
@@ -0,0 +1,25 @@
|
||||
.portal.settings-tabs.no-padding {
|
||||
padding-right: var(--ae-panel-padding) !important;
|
||||
}
|
||||
|
||||
* .settings-comment:has(a) {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
* .settings-comment a {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.portal.settings-tabs button:not(button:has(+span), span+button) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.portal.settings-tabs span+button {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.portal.settings-tabs button:has(+span) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 357 B |
BIN
extensions-builtin/sd-webui-ux/assets/fonts/7-digit.woff
Normal file
BIN
extensions-builtin/sd-webui-ux/assets/fonts/7-digit.woff
Normal file
Binary file not shown.
BIN
extensions-builtin/sd-webui-ux/assets/fonts/7-digit.woff2
Normal file
BIN
extensions-builtin/sd-webui-ux/assets/fonts/7-digit.woff2
Normal file
Binary file not shown.
BIN
extensions-builtin/sd-webui-ux/assets/fonts/DISPLAY FREE TFB.ttf
Normal file
BIN
extensions-builtin/sd-webui-ux/assets/fonts/DISPLAY FREE TFB.ttf
Normal file
Binary file not shown.
BIN
extensions-builtin/sd-webui-ux/assets/fonts/E1234.ttf
Normal file
BIN
extensions-builtin/sd-webui-ux/assets/fonts/E1234.ttf
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 419 KiB After Width: | Height: | Size: 419 KiB |
|
Before Width: | Height: | Size: 947 KiB After Width: | Height: | Size: 947 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 934 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 939 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 257 B |
|
Before Width: | Height: | Size: 443 B After Width: | Height: | Size: 443 B |
|
Before Width: | Height: | Size: 197 B After Width: | Height: | Size: 197 B |
|
Before Width: | Height: | Size: 250 B After Width: | Height: | Size: 250 B |
|
Before Width: | Height: | Size: 197 B After Width: | Height: | Size: 197 B |
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 208 B After Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 301 B |
|
Before Width: | Height: | Size: 345 B After Width: | Height: | Size: 345 B |
|
Before Width: | Height: | Size: 209 B After Width: | Height: | Size: 209 B |
|
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 189 B |
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 303 B |
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 266 B |
|
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 417 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 254 B After Width: | Height: | Size: 254 B |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 191 B After Width: | Height: | Size: 191 B |
|
Before Width: | Height: | Size: 268 B After Width: | Height: | Size: 268 B |
|
Before Width: | Height: | Size: 174 B After Width: | Height: | Size: 174 B |
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 204 B |
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 315 B After Width: | Height: | Size: 315 B |
|
Before Width: | Height: | Size: 830 B After Width: | Height: | Size: 830 B |
|
Before Width: | Height: | Size: 672 B After Width: | Height: | Size: 672 B |
|
Before Width: | Height: | Size: 1005 B After Width: | Height: | Size: 1005 B |
|
Before Width: | Height: | Size: 772 B After Width: | Height: | Size: 772 B |
|
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 224 B |
|
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 239 B |
|
Before Width: | Height: | Size: 563 B After Width: | Height: | Size: 563 B |
|
Before Width: | Height: | Size: 286 B After Width: | Height: | Size: 286 B |
|
Before Width: | Height: | Size: 310 B After Width: | Height: | Size: 310 B |
|
Before Width: | Height: | Size: 392 B After Width: | Height: | Size: 392 B |
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 266 B |
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 341 B |
|
Before Width: | Height: | Size: 293 B After Width: | Height: | Size: 293 B |
|
Before Width: | Height: | Size: 285 B After Width: | Height: | Size: 285 B |
|
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 309 B |
|
Before Width: | Height: | Size: 307 B After Width: | Height: | Size: 307 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user