extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 16:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #501 from mdiller/mdiller_fancyswitches

Browse Source 
Better Toggle Inputs & Updated Settings UI
This commit is contained in:
cmdr2 2022-11-18 16:17:54 +05:30 committed by GitHub
commit 0067e46192
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 190 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/index.html
View File

@ -47,7 +47,6 @@
<label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>
<textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
<input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
<label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
Negative Prompt
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about Negative Prompts</span></i></a>
@ -94,7 +93,7 @@
<h4 class="collapsible">
Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
<span class="simple-tooltip left">
<span class="simple-tooltip right">
Reset Image Settings
</span>
</i>
@ -242,7 +241,7 @@
<div id="tab-content-settings" class="tab-content">
<div id="system-settings" class="tab-content-inner">
<h1>System Settings</h1>
<table class="form-table"></table>
<div class="parameters-table"></div>
<br/>
<button id="save-system-settings-btn" class="primaryButton">Save</button>
<br/><br/>

59
ui/media/css/auto-save.css
View File

@ -26,23 +26,56 @@
float: left;
}
.form-table small {
.parameters-table {
display: flex;
flex-direction: column;
gap: 1px;
}
.parameters-table > div {
background: var(--background-color2);
display: flex;
padding: 0px 4px;
}
.parameters-table > div > div {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.parameters-table small {
color: rgb(153, 153, 153);
}
#system-settings .form-table td {
height: 24px;
.parameters-table > div > div:nth-child(1) {
font-size: 20px;
width: 45px;
}
#system-settings .form-table td:last-child div {
display: flex;
align-items: center;
}
#system-settings .form-table td:last-child div > :not([type="checkbox"]):first-child {
margin-left: 3px;
}
#system-settings .form-table td:last-child div small {
padding-left: 5px;
.parameters-table > div > div:nth-child(2) {
flex: 1;
flex-direction: column;
text-align: left;
justify-content: center;
align-items: start;
gap: 4px;
}
.parameters-table > div > div:nth-child(3) {
text-align: right;
}
.parameters-table > div:first-child {
border-radius: 12px 12px 0px 0px;
}
.parameters-table > div:last-child {
border-radius: 0px 0px 12px 12px;
}
.parameters-table .fa-fire {
color: #F7630C;
}

69
ui/media/css/main.css
View File

@ -216,7 +216,6 @@ code {
display: none !important;
}
#editor-modifiers {
max-width: 600px;
overflow-y: auto;
overflow-x: hidden;
}
@ -506,6 +505,10 @@ img {
border-radius: 6px 0px;
}
#editor-settings {
min-width: 500px;
}
#editor-settings-entries {
display: flex;
flex-direction: column;
@ -595,6 +598,57 @@ input::file-selector-button {
height: 19px;
}
.input-toggle {
display: inline-block;
position: relative;
vertical-align: middle;
width: calc(var(--input-height) * 2);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
margin-right: 4px;
}
.input-toggle > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.input-toggle > label {
display: block;
overflow: hidden;
cursor: pointer;
height: var(--input-height);
padding: 0;
line-height: var(--input-height);
border: var(--input-border-size) solid var(--input-border-color);
border-radius: var(--input-height);
background: var(--input-background-color);
transition: background 0.2s ease-in;
}
.input-toggle > label:before {
content: "";
display: block;
width: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
margin: 0px;
background: var(--input-text-color);
position: absolute;
top: calc(var(--input-border-size) + var(--input-switch-padding));
bottom: calc(var(--input-border-size) + var(--input-switch-padding));
right: calc(var(--input-border-size) + var(--input-switch-padding) + var(--input-height));
border-radius: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
transition: all 0.2s ease-in 0s;
opacity: 0.8;
}
.input-toggle > input:checked + label {
background: var(--accent-color);
}
.input-toggle > input:checked + label:before {
right: calc(var(--input-border-size) + var(--input-switch-padding));
opacity: 1;
}
/* MOBILE SUPPORT */
@media screen and (max-width: 700px) {
#top-nav {
@ -636,6 +690,9 @@ input::file-selector-button {
#editor {
padding: 16px 8px;
}
#editor-settings {
min-width: 0px;
}
.tab-content-inner {
margin: 0px;
}
@ -659,14 +716,8 @@ input::file-selector-button {
padding: 0px !important;
margin: 24px !important;
}
.simple-tooltip.right {
right: initial;
left: 0px;
top: 50%;
transform: translate(calc(-100% + 15%), -50%);
}
:hover > .simple-tooltip.right {
transform: translate(100%, -50%);
.simple-tooltip {
display: none;
}
}

89
ui/media/css/themes.css
View File

@ -1,22 +1,26 @@
:root {
--background-color1: rgb(32, 33, 36); /* main parts of the page */
--background-color2: rgb(44, 45, 48); /* main panels */
--background-color3: rgb(47, 49, 53);
--background-color4: rgb(18, 18, 19); /* settings dropdowns */
--main-hue: 222;
--main-saturation: 4%;
--value-base: 13%;
--value-step: 5%;
--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.5 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1.5 * var(--value-step))));
--accent-hue: 266;
--accent-hue: 263;
--accent-lightness: 36%;
--accent-lightness-hover: 40%;
--text-color: #eee;
--input-text-color: black;
--input-background-color: #e9e9ed;
--input-border-color: #8f8f9d;
--input-text-color: #ccc;
--input-background-color: var(--background-color3);
--input-border-color: var(--background-color4);
--button-text-color: var(--input-text-color);
--button-color: #e9e9ed;
--button-border: 1px solid #8f8f9d;
--button-color: var(--accent-color);
--button-border: none;
/* other */
--input-border-radius: 4px;
@ -24,6 +28,8 @@
--accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
--accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
--primary-button-border: none;
--input-switch-padding: 1px;
--input-height: 24px;
}
.theme-light {
@ -33,6 +39,7 @@
--background-color4: #cccccc;
--text-color: black;
--button-text-color: white;
--input-text-color: black;
--input-background-color: #f8f9fa;
@ -47,12 +54,7 @@
--accent-hue: 235;
--accent-lightness: 65%;
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-text-color: #ccc;
--input-border-size: 2px;
--input-background-color: #202225;
--input-border-color: var(--input-background-color);
@ -69,15 +71,6 @@
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--accent-hue: 212;
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px;
--input-background-color: var(--background-color3);
--input-text-color: #ccc;
--input-border-color: var(--background-color4);
}
@ -90,16 +83,6 @@
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px;
--input-background-color: var(--background-color3);
--input-text-color: #ccc;
--input-border-color: var(--background-color4);
}
.theme-super-dark {
@ -112,15 +95,7 @@
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 0px;
--input-background-color: var(--background-color3);
--input-text-color: #ccc;
--input-border-color: var(--background-color4);
--input-border-size: 0px;
}
.theme-wild {
@ -134,13 +109,33 @@
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--accent-hue: 212;
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px;
--input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
--input-text-color: red;
--input-border-color: green;
}
.theme-gnomie {
--background-color1: #242424;
--background-color2: #353535;
--background-color3: #494949;
--background-color4: #000000;
--accent-hue: 213;
--accent-lightness: 76.8%;
--accent-color: #3584e4;
--input-border-radius: 6px;
--input-text-color: #ffffff;
--input-background-color: #2a2a2a;
--input-border-size: 0px;
--input-border-color: var(--input-background-color);
}
.theme-hamunii .panel-box {
border: none;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

3
ui/media/js/auto-save.js
View File

@ -213,6 +213,7 @@ function fillSaveSettingsConfigTable() {
})
})
})
prettifyInputs(saveSettingsConfigTable)
}
// configureSettingsSaveBtn
@ -224,7 +225,7 @@ var autoSaveSettings = document.getElementById("auto_save_settings")
var configSettingsButton = document.createElement("button")
configSettingsButton.textContent = "Configure"
configSettingsButton.style.margin = "0px 5px"
autoSaveSettings.insertAdjacentElement("afterend", configSettingsButton)
autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
autoSaveSettings.addEventListener("change", () => {
configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
})

1
ui/media/js/main.js
View File

@ -1340,3 +1340,4 @@ window.addEventListener("beforeunload", function(e) {
});
createCollapsibles()
prettifyInputs(document);

27
ui/media/js/parameters.js
View File

@ -28,18 +28,21 @@ var PARAMETERS = [
type: ParameterType.select,
label: "Theme",
default: "theme-default",
note: "customize the look and feel of the ui",
options: [ // Note: options expanded dynamically
{
value: "theme-default",
label: "Default"
}
]
],
icon: "fa-palette"
},
{
id: "save_to_disk",
type: ParameterType.checkbox,
label: "Auto-Save Images",
note: "automatically saves images to the specified location",
icon: "fa-download",
default: false,
},
{
@ -55,6 +58,7 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Enable Sound",
note: "plays a sound on task completion",
icon: "fa-volume-low",
default: true,
},
{
@ -62,20 +66,23 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Open browser on startup",
note: "starts the default browser on startup",
icon: "fa-window-restore",
default: true,
},
{
id: "turbo",
type: ParameterType.checkbox,
label: "Turbo Mode",
default: true,
note: "generates images faster, but uses an additional 1 GB of GPU memory",
icon: "fa-forward",
default: true,
},
{
id: "use_cpu",
type: ParameterType.checkbox,
label: "Use CPU (not GPU)",
note: "warning: this will be *very* slow",
icon: "fa-microchip",
default: false,
},
{
@ -96,6 +103,7 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Use Full Precision",
note: "for GPU-only. warning: this will consume more VRAM",
icon: "fa-crosshairs",
default: false,
},
{
@ -103,13 +111,15 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Auto-Save Settings",
note: "restores settings on browser load",
icon: "fa-gear",
default: true,
},
{
id: "use_beta_channel",
type: ParameterType.checkbox,
label: "🔥Beta channel",
label: "Beta channel",
note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
icon: "fa-fire",
default: false,
},
];
@ -140,16 +150,18 @@ function getParameterElement(parameter) {
}
}
let parametersTable = document.querySelector("#system-settings table")
let parametersTable = document.querySelector("#system-settings .parameters-table")
/* fill in the system settings popup table */
function initParameters() {
PARAMETERS.forEach(parameter => {
var element = getParameterElement(parameter)
var note = parameter.note ? `<small>${parameter.note}</small>` : "";
var newrow = document.createElement('tr')
var icon = parameter.icon ? `<i class="fa ${parameter.icon}"></i>` : "";
var newrow = document.createElement('div')
newrow.innerHTML = `
<td><label for="${parameter.id}">${parameter.label}</label></td>
<td><div>${element}${note}<div></td>`
<div>${icon}</div>
<div><label for="${parameter.id}">${parameter.label}</label>${note}</div>
<div>${element}</div>`
parametersTable.appendChild(newrow)
parameter.settingsEntry = newrow
})
@ -224,6 +236,7 @@ function getCurrentRenderDeviceSelection() {
useCPUField.addEventListener('click', function() {
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
console.log("hello", this.checked);
if (this.checked) {
gpuSettingEntry.style.display = 'none'
autoPickGPUSettingEntry.style.display = 'none'

2
ui/media/js/themes.js
View File

@ -14,7 +14,7 @@ function initTheme() {
.flatMap(sheet => Array.from(sheet.cssRules))
.forEach(rule => {
var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
if (selector && selector.startsWith(".theme-")) {
if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
var theme_key = selector.substring(1);
THEMES.push({
key: theme_key,

16
ui/media/js/utils.js
View File

@ -358,3 +358,19 @@ function preventNonNumericalInput(e) {
e.preventDefault();
}
}
/* inserts custom html to allow prettifying of inputs */
function prettifyInputs(root_element) {
root_element.querySelectorAll(`input[type="checkbox"]`).forEach(element => {
var parent = element.parentNode;
if (!parent.classList.contains("input-toggle")) {
var wrapper = document.createElement("div");
wrapper.classList.add("input-toggle");
parent.replaceChild(wrapper, element);
wrapper.appendChild(element);
var label = document.createElement("label");
label.htmlFor = element.id;
wrapper.appendChild(label);
}
})
}