forked from extern/easydiffusion
Merge pull request #417 from mdiller/mdiller_parameters
Moved System Settings & Reworked into "Parameters"
This commit is contained in:
cmdr2
GitHub
commit
ab9b08770a
@ -30,35 +30,8 @@
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<li id="settings-button" class="dropdown">
|
||||
<span><i class="fa fa-gear icon"></i> Settings</span>
|
||||
<div id="system-settings" class="panel-box settings-box dropdown-content">
|
||||
<ul id="system-settings-entries">
|
||||
<li><b class="settings-subheader">System Settings</b></li>
|
||||
<br/>
|
||||
<li><label for="theme">Theme: </label><select id="theme" name="theme"><option value="theme-default">Default</option></select></li>
|
||||
<li><input id="save_to_disk" name="save_to_disk" type="checkbox"> <label for="save_to_disk">Automatically save to <input id="diskPath" name="diskPath" size="40" disabled></label></li>
|
||||
<li>
|
||||
<label for="default_vae_model">Default VAE:</label></td><td>
|
||||
<select id="default_vae_model" name="default_vae_model">
|
||||
<!-- <option value="vae-ft-mse-840000-ema-pruned" selected>vae-ft-mse-840000-ema-pruned</option> -->
|
||||
</select>
|
||||
</li>
|
||||
<li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li>
|
||||
<li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode <small>(generates images faster, but uses an additional 1 GB of GPU memory)</small></label></li>
|
||||
<li><input id="use_cpu" name="use_cpu" type="checkbox"> <label for="use_cpu">Use CPU instead of GPU <small>(warning: this will be *very* slow)</small></label></li>
|
||||
<li><input id="use_full_precision" name="use_full_precision" type="checkbox"> <label for="use_full_precision">Use full precision <small>(for GPU-only. warning: this will consume more VRAM)</small></label></li>
|
||||
<li>
|
||||
<input id="auto_save_settings" name="auto_save_settings" checked type="checkbox">
|
||||
<label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
|
||||
<br/>
|
||||
<button id="configureSettingsSaveBtn">Configure</button>
|
||||
</li>
|
||||
<!-- <li><input id="allow_nsfw" name="allow_nsfw" type="checkbox"> <label for="allow_nsfw">Allow NSFW Content (You confirm you are above 18 years of age)</label></li> -->
|
||||
<br/>
|
||||
<li><input id="use_beta_channel" name="use_beta_channel" type="checkbox"> <label for="use_beta_channel">🔥Beta channel. Get the latest features immediately (but could be less stable). Please restart the program after changing this.</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -239,20 +212,28 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="save-settings-config" style="display:none">
|
||||
|
||||
<div id="system-settings" class="popup">
|
||||
<div>
|
||||
<span id="save-settings-config-close-btn">X</span>
|
||||
<i class="close-button fa-solid fa-xmark"></i>
|
||||
<h1>System Settings</h1>
|
||||
<table class="form-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="save-settings-config" class="popup">
|
||||
<div>
|
||||
<i class="close-button fa-solid fa-xmark"></i>
|
||||
<h1>Save Settings Configuration</h1>
|
||||
<p>Select which settings should be remembered when restarting the browser</p>
|
||||
<table id="save-settings-config-table">
|
||||
<table id="save-settings-config-table" class="form-table">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modifier-settings-config" style="display:none">
|
||||
<div id="modifier-settings-config" class="popup">
|
||||
<div>
|
||||
<span id="modifier-settings-config-close-btn">X</span>
|
||||
<i class="close-button fa-solid fa-xmark"></i>
|
||||
<h1>Modifier Settings</h1>
|
||||
<p>Set your custom modifiers (one per line)</p>
|
||||
<textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
|
||||
@ -274,6 +255,7 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="media/js/parameters.js?v=1"></script>
|
||||
<script src="media/js/plugins.js?v=1"></script>
|
||||
<script src="media/js/utils.js?v=4"></script>
|
||||
<script src="media/js/inpainting-editor.js?v=1"></script>
|
||||
|
||||
@ -6,56 +6,30 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
#save-settings-config {
|
||||
position: absolute;
|
||||
background: rgba(32, 33, 36, 50%);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#save-settings-config > div {
|
||||
background: var(--background-color3);
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
border-radius: 6px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#save-settings-config-table {
|
||||
.form-table {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#save-settings-config-table th {
|
||||
.form-table th {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#save-settings-config-table td:first-child,
|
||||
#save-settings-config-table th:first-child {
|
||||
.form-table td:first-child > *,
|
||||
.form-table th:first-child > * {
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#save-settings-config-table td:last-child,
|
||||
#save-settings-config-table th:last-child {
|
||||
.form-table td:last-child > *,
|
||||
.form-table th:last-child > * {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#save-settings-config-table td small {
|
||||
.form-table small {
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
#save-settings-config-close-btn {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
transform: translate(50%, -50%) scaleX(130%);
|
||||
}
|
||||
|
||||
#reset-image-settings {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
@ -72,3 +46,20 @@
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#system-settings .form-table td {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#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;
|
||||
text-align: left;
|
||||
}
|
||||
@ -311,6 +311,8 @@ img {
|
||||
float: left;
|
||||
display: inline;
|
||||
padding-left: 20pt;
|
||||
}
|
||||
#top-nav-items > li:first-child {
|
||||
cursor: default;
|
||||
}
|
||||
#initial-text {
|
||||
@ -324,20 +326,6 @@ img {
|
||||
.pl-5 {
|
||||
padding-left: 5pt;
|
||||
}
|
||||
#system-settings {
|
||||
width: 360pt;
|
||||
transform: translateX(-100%) translateX(70pt);
|
||||
|
||||
padding-top: 10pt;
|
||||
padding-bottom: 10pt;
|
||||
}
|
||||
#system-settings ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#system-settings li {
|
||||
padding-left: 5pt;
|
||||
}
|
||||
#community-links {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
@ -677,4 +665,47 @@ input::file-selector-button {
|
||||
@keyframes progress-anim {
|
||||
0% { background-position: -55px 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.popup:not(.active) {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
background: rgba(32, 33, 36, 50%);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
transition: 0s visibility, 0.3s opacity;
|
||||
}
|
||||
|
||||
.popup > div {
|
||||
position: relative;
|
||||
background: var(--background-color2);
|
||||
border: solid 1px var(--background-color3);
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
border-radius: 6px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 30px black;
|
||||
}
|
||||
|
||||
.popup .close-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
transform: scale(150%);
|
||||
cursor: pointer;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -217,32 +217,6 @@
|
||||
#modifier-settings-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#modifier-settings-config {
|
||||
position: fixed;
|
||||
background: rgba(32, 33, 36, 50%);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#modifier-settings-config > div {
|
||||
background: var(--background-color2);
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
margin-top: 100px;
|
||||
border-radius: 6px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
#modifier-settings-config-close-btn {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
transform: translate(50%, -50%) scaleX(130%);
|
||||
}
|
||||
#modifier-settings-config textarea {
|
||||
width: 90%;
|
||||
height: 150px;
|
||||
|
||||
@ -52,7 +52,9 @@ const SETTINGS_SECTIONS = [ // gets the "keys" property filled in with an ordere
|
||||
async function initSettings() {
|
||||
SETTINGS_IDS_LIST.forEach(id => {
|
||||
var element = document.getElementById(id)
|
||||
var label = document.querySelector(`label[for='${element.id}']`)
|
||||
if (!element) {
|
||||
console.error(`Missing settings element ${id}`)
|
||||
}
|
||||
SETTINGS[id] = {
|
||||
key: id,
|
||||
element: element,
|
||||
@ -126,8 +128,12 @@ function loadSettings() {
|
||||
return
|
||||
}
|
||||
CURRENTLY_LOADING_SETTINGS = true
|
||||
saved_settings.map(saved_setting => {
|
||||
saved_settings.forEach(saved_setting => {
|
||||
var setting = SETTINGS[saved_setting.key]
|
||||
if (!setting) {
|
||||
console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`);
|
||||
return null;
|
||||
}
|
||||
setting.ignore = saved_setting.ignore
|
||||
if (!setting.ignore) {
|
||||
setting.value = saved_setting.value
|
||||
@ -208,20 +214,22 @@ function fillSaveSettingsConfigTable() {
|
||||
})
|
||||
}
|
||||
|
||||
document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
|
||||
saveSettingsConfigOverlay.style.display = 'none'
|
||||
// configureSettingsSaveBtn
|
||||
|
||||
|
||||
|
||||
|
||||
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.addEventListener("change", () => {
|
||||
configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
|
||||
})
|
||||
document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
|
||||
configSettingsButton.addEventListener('click', () => {
|
||||
fillSaveSettingsConfigTable()
|
||||
saveSettingsConfigOverlay.style.display = 'block'
|
||||
})
|
||||
saveSettingsConfigOverlay.addEventListener('click', (event) => {
|
||||
if (event.target.id == saveSettingsConfigOverlay.id) {
|
||||
saveSettingsConfigOverlay.style.display = 'none'
|
||||
}
|
||||
})
|
||||
document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
|
||||
saveSettingsConfigOverlay.style.display = 'none'
|
||||
saveSettingsConfigOverlay.classList.add("active")
|
||||
})
|
||||
resetImageSettingsButton.addEventListener('click', event => {
|
||||
loadDefaultSettingsSection("editor-settings");
|
||||
|
||||
@ -246,15 +246,7 @@ modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlid
|
||||
previewImageField.onchange = () => changePreviewImages(previewImageField.value)
|
||||
|
||||
modifierSettingsBtn.addEventListener('click', function() {
|
||||
modifierSettingsOverlay.style.display = 'block'
|
||||
})
|
||||
document.getElementById("modifier-settings-config-close-btn").addEventListener('click', () => {
|
||||
modifierSettingsOverlay.style.display = 'none'
|
||||
})
|
||||
modifierSettingsOverlay.addEventListener('click', (event) => {
|
||||
if (event.target.id == modifierSettingsOverlay.id) {
|
||||
modifierSettingsOverlay.style.display = 'none'
|
||||
}
|
||||
modifierSettingsOverlay.classList.add("active")
|
||||
})
|
||||
|
||||
function saveCustomModifiers() {
|
||||
|
||||
@ -1054,11 +1054,13 @@ function onDimensionChange() {
|
||||
resizeInpaintingEditor(widthValue, heightValue)
|
||||
}
|
||||
|
||||
saveToDiskField.addEventListener('click', function(e) {
|
||||
diskPathField.disabled = !saveToDiskField.checked
|
||||
saveToDiskField.addEventListener('change', function(e) {
|
||||
diskPathField.disabled = !this.checked
|
||||
})
|
||||
|
||||
useUpscalingField.addEventListener('click', function(e) {
|
||||
upscaleModelField.disabled = !useUpscalingField.checked
|
||||
useUpscalingField.addEventListener('change', function(e) {
|
||||
upscaleModelField.disabled = !this.checked
|
||||
})
|
||||
|
||||
@ -1311,4 +1313,20 @@ async function getDiskPath() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* setup popup handlers */
|
||||
document.querySelectorAll('.popup').forEach(popup => {
|
||||
popup.addEventListener('click', event => {
|
||||
if (event.target == popup) {
|
||||
popup.classList.remove("active")
|
||||
}
|
||||
})
|
||||
var closeButton = popup.querySelector(".close-button")
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener('click', () => {
|
||||
popup.classList.remove("active")
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
createCollapsibles()
|
||||
|
||||
137
ui/media/js/parameters.js
Normal file
137
ui/media/js/parameters.js
Normal file
@ -0,0 +1,137 @@
|
||||
|
||||
|
||||
/**
|
||||
* Enum of parameter types
|
||||
* @readonly
|
||||
* @enum {string}
|
||||
*/
|
||||
var ParameterType = {
|
||||
checkbox: "checkbox",
|
||||
select: "select",
|
||||
custom: "custom",
|
||||
};
|
||||
|
||||
/**
|
||||
* JSDoc style
|
||||
* @typedef {object} Parameter
|
||||
* @property {string} id
|
||||
* @property {ParameterType} type
|
||||
* @property {string} label
|
||||
* @property {?string} note
|
||||
* @property {number|boolean|string} default
|
||||
*/
|
||||
|
||||
|
||||
/** @type {Array.<Parameter>} */
|
||||
var PARAMETERS = [
|
||||
{
|
||||
id: "theme",
|
||||
type: ParameterType.select,
|
||||
label: "Theme",
|
||||
default: "theme-default",
|
||||
options: [ // Note: options expanded dynamically
|
||||
{
|
||||
value: "theme-default",
|
||||
label: "Default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "save_to_disk",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Auto-Save Images",
|
||||
note: "automatically saves images to the specified location",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "diskPath",
|
||||
type: ParameterType.custom,
|
||||
label: "Save Location",
|
||||
render: (parameter) => {
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="40" disabled>`
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "default_vae_model",
|
||||
type: ParameterType.select, // Note: options generated dynamically
|
||||
label: "Default VAE",
|
||||
},
|
||||
{
|
||||
id: "sound_toggle",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Enable Sound",
|
||||
note: "plays a sound on task completion",
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: "use_cpu",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Use CPU instead of GPU",
|
||||
note: "warning: this will be *very* slow",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "use_full_precision",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Use Full Precision",
|
||||
note: "for GPU-only. warning: this will consume more VRAM",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "auto_save_settings",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Auto-Save Settings",
|
||||
note: "restores settings on browser load",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "use_beta_channel",
|
||||
type: ParameterType.checkbox,
|
||||
label: "🔥Beta channel",
|
||||
note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
|
||||
default: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
function getParameterElement(parameter) {
|
||||
switch (parameter.type) {
|
||||
case ParameterType.checkbox:
|
||||
var is_checked = parameter.default ? " checked" : "";
|
||||
return `<input id="${parameter.id}" name="${parameter.id}"${is_checked} type="checkbox">`
|
||||
case ParameterType.select:
|
||||
var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
|
||||
return `<select id="${parameter.id}" name="${parameter.id}">${options}</select>`
|
||||
case ParameterType.custom:
|
||||
return parameter.render(parameter)
|
||||
default:
|
||||
console.error(`Invalid type for parameter ${parameter.id}`);
|
||||
return "ERROR: Invalid Type"
|
||||
}
|
||||
}
|
||||
|
||||
var parametersTable = document.querySelector("#system-settings 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 = `<tr>
|
||||
<td><label for="${parameter.id}">${parameter.label}</label></td>
|
||||
<td><div>${element}${note}<div></td></tr>`
|
||||
parametersTable.insertAdjacentHTML("beforeend", newrow)
|
||||
})
|
||||
}
|
||||
|
||||
initParameters();
|
||||
|
||||
document.getElementById("settings-button").addEventListener('click', event => {
|
||||
document.getElementById("system-settings").classList.add("active")
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user