mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-22 16:23:28 +01:00
added parameters
This commit is contained in:
Malcolm Diller
parent
09c11a385d
commit
301af7bd7a
@ -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,13 +212,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="system-settings" class="popup">
|
||||
<div>
|
||||
<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>
|
||||
@ -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,26 +6,27 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
@ -45,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;
|
||||
@ -712,4 +700,8 @@ input::file-selector-button {
|
||||
transform: scale(150%);
|
||||
cursor: pointer;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -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,8 +214,20 @@ function fillSaveSettingsConfigTable() {
|
||||
})
|
||||
}
|
||||
|
||||
// configureSettingsSaveBtn
|
||||
|
||||
document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
|
||||
|
||||
|
||||
|
||||
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"
|
||||
})
|
||||
configSettingsButton.addEventListener('click', () => {
|
||||
fillSaveSettingsConfigTable()
|
||||
saveSettingsConfigOverlay.classList.add("active")
|
||||
})
|
||||
|
||||
@ -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,6 +1313,7 @@ async function getDiskPath() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* setup popup handlers */
|
||||
document.querySelectorAll('.popup').forEach(popup => {
|
||||
popup.addEventListener('click', event => {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
var ParameterType = {
|
||||
checkbox: "checkbox",
|
||||
select: "select",
|
||||
text: "text",
|
||||
custom: "custom",
|
||||
};
|
||||
|
||||
/**
|
||||
@ -43,10 +43,12 @@ var PARAMETERS = [
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "diskPath", // TODO: auto-disabling of this based on save_to_disk
|
||||
type: ParameterType.text,
|
||||
id: "diskPath",
|
||||
type: ParameterType.custom,
|
||||
label: "Save Location",
|
||||
default: "", // Note: default value is generated
|
||||
render: (parameter) => {
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="40" disabled>`
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "default_vae_model",
|
||||
@ -94,4 +96,40 @@ var PARAMETERS = [
|
||||
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