mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-08-09 07:45:01 +02:00
add prettier for JS style
This commit is contained in:
Lucas Marcelli
@ -8,8 +8,8 @@ var ParameterType = {
|
||||
select: "select",
|
||||
select_multiple: "select_multiple",
|
||||
slider: "slider",
|
||||
custom: "custom",
|
||||
};
|
||||
custom: "custom"
|
||||
}
|
||||
|
||||
/**
|
||||
* JSDoc style
|
||||
@ -24,7 +24,6 @@ var ParameterType = {
|
||||
* @property {boolean?} saveInAppConfig
|
||||
*/
|
||||
|
||||
|
||||
/** @type {Array.<Parameter>} */
|
||||
var PARAMETERS = [
|
||||
{
|
||||
@ -33,7 +32,8 @@ var PARAMETERS = [
|
||||
label: "Theme",
|
||||
default: "theme-default",
|
||||
note: "customize the look and feel of the ui",
|
||||
options: [ // Note: options expanded dynamically
|
||||
options: [
|
||||
// Note: options expanded dynamically
|
||||
{
|
||||
value: "theme-default",
|
||||
label: "Default"
|
||||
@ -47,7 +47,7 @@ var PARAMETERS = [
|
||||
label: "Auto-Save Images",
|
||||
note: "automatically saves images to the specified location",
|
||||
icon: "fa-download",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "diskPath",
|
||||
@ -82,13 +82,13 @@ var PARAMETERS = [
|
||||
},
|
||||
{
|
||||
value: "embed,txt",
|
||||
label: "embed & txt",
|
||||
label: "embed & txt"
|
||||
},
|
||||
{
|
||||
value: "embed,json",
|
||||
label: "embed & json",
|
||||
},
|
||||
],
|
||||
label: "embed & json"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "block_nsfw",
|
||||
@ -96,7 +96,7 @@ var PARAMETERS = [
|
||||
label: "Block NSFW images",
|
||||
note: "blurs out NSFW images",
|
||||
icon: "fa-land-mine-on",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "sound_toggle",
|
||||
@ -104,7 +104,7 @@ var PARAMETERS = [
|
||||
label: "Enable Sound",
|
||||
note: "plays a sound on task completion",
|
||||
icon: "fa-volume-low",
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
{
|
||||
id: "process_order_toggle",
|
||||
@ -112,7 +112,7 @@ var PARAMETERS = [
|
||||
label: "Process newest jobs first",
|
||||
note: "reverse the normal processing order",
|
||||
icon: "fa-arrow-down-short-wide",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "ui_open_browser_on_start",
|
||||
@ -121,23 +121,24 @@ var PARAMETERS = [
|
||||
note: "starts the default browser on startup",
|
||||
icon: "fa-window-restore",
|
||||
default: true,
|
||||
saveInAppConfig: true,
|
||||
saveInAppConfig: true
|
||||
},
|
||||
{
|
||||
id: "vram_usage_level",
|
||||
type: ParameterType.select,
|
||||
label: "GPU Memory Usage",
|
||||
note: "Faster performance requires more GPU memory (VRAM)<br/><br/>" +
|
||||
"<b>Balanced:</b> nearly as fast as High, much lower VRAM usage<br/>" +
|
||||
"<b>High:</b> fastest, maximum GPU memory usage</br>" +
|
||||
"<b>Low:</b> slowest, recommended for GPUs with 3 to 4 GB memory",
|
||||
note:
|
||||
"Faster performance requires more GPU memory (VRAM)<br/><br/>" +
|
||||
"<b>Balanced:</b> nearly as fast as High, much lower VRAM usage<br/>" +
|
||||
"<b>High:</b> fastest, maximum GPU memory usage</br>" +
|
||||
"<b>Low:</b> slowest, recommended for GPUs with 3 to 4 GB memory",
|
||||
icon: "fa-forward",
|
||||
default: "balanced",
|
||||
options: [
|
||||
{value: "balanced", label: "Balanced"},
|
||||
{value: "high", label: "High"},
|
||||
{value: "low", label: "Low"}
|
||||
],
|
||||
{ value: "balanced", label: "Balanced" },
|
||||
{ value: "high", label: "High" },
|
||||
{ value: "low", label: "Low" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "use_cpu",
|
||||
@ -145,20 +146,20 @@ var PARAMETERS = [
|
||||
label: "Use CPU (not GPU)",
|
||||
note: "warning: this will be *very* slow",
|
||||
icon: "fa-microchip",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "auto_pick_gpus",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Automatically pick the GPUs (experimental)",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "use_gpus",
|
||||
type: ParameterType.select_multiple,
|
||||
label: "GPUs to use (experimental)",
|
||||
note: "to process in parallel",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "auto_save_settings",
|
||||
@ -166,15 +167,16 @@ var PARAMETERS = [
|
||||
label: "Auto-Save Settings",
|
||||
note: "restores settings on browser load",
|
||||
icon: "fa-gear",
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
{
|
||||
id: "confirm_dangerous_actions",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Confirm dangerous actions",
|
||||
note: "Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
|
||||
note:
|
||||
"Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
|
||||
icon: "fa-check-double",
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
{
|
||||
id: "listen_to_network",
|
||||
@ -183,7 +185,7 @@ var PARAMETERS = [
|
||||
note: "Other devices on your network can access this web page",
|
||||
icon: "fa-network-wired",
|
||||
default: true,
|
||||
saveInAppConfig: true,
|
||||
saveInAppConfig: true
|
||||
},
|
||||
{
|
||||
id: "listen_port",
|
||||
@ -194,29 +196,31 @@ var PARAMETERS = [
|
||||
render: (parameter) => {
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`
|
||||
},
|
||||
saveInAppConfig: true,
|
||||
saveInAppConfig: 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.",
|
||||
note:
|
||||
"Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
|
||||
icon: "fa-fire",
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
{
|
||||
id: "test_diffusers",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Test Diffusers",
|
||||
note: "<b>Experimental! Can have bugs!</b> Use upcoming features (like LoRA) in our new engine. Please press Save, then restart the program after changing this.",
|
||||
note:
|
||||
"<b>Experimental! Can have bugs!</b> Use upcoming features (like LoRA) in our new engine. Please press Save, then restart the program after changing this.",
|
||||
icon: "fa-bolt",
|
||||
default: false,
|
||||
saveInAppConfig: true,
|
||||
},
|
||||
];
|
||||
saveInAppConfig: true
|
||||
}
|
||||
]
|
||||
|
||||
function getParameterSettingsEntry(id) {
|
||||
let parameter = PARAMETERS.filter(p => p.id === id)
|
||||
let parameter = PARAMETERS.filter((p) => p.id === id)
|
||||
if (parameter.length === 0) {
|
||||
return
|
||||
}
|
||||
@ -224,37 +228,39 @@ function getParameterSettingsEntry(id) {
|
||||
}
|
||||
|
||||
function sliderUpdate(event) {
|
||||
if (event.srcElement.id.endsWith('-input')) {
|
||||
let slider = document.getElementById(event.srcElement.id.slice(0,-6))
|
||||
if (event.srcElement.id.endsWith("-input")) {
|
||||
let slider = document.getElementById(event.srcElement.id.slice(0, -6))
|
||||
slider.value = event.srcElement.value
|
||||
slider.dispatchEvent(new Event("change"))
|
||||
} else {
|
||||
let field = document.getElementById(event.srcElement.id+'-input')
|
||||
let field = document.getElementById(event.srcElement.id + "-input")
|
||||
field.value = event.srcElement.value
|
||||
field.dispatchEvent(new Event("change"))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Parameter} parameter
|
||||
* @param {Parameter} parameter
|
||||
* @returns {string | HTMLElement}
|
||||
*/
|
||||
function getParameterElement(parameter) {
|
||||
switch (parameter.type) {
|
||||
case ParameterType.checkbox:
|
||||
var is_checked = parameter.default ? " checked" : "";
|
||||
var is_checked = parameter.default ? " checked" : ""
|
||||
return `<input id="${parameter.id}" name="${parameter.id}"${is_checked} type="checkbox">`
|
||||
case ParameterType.select:
|
||||
case ParameterType.select_multiple:
|
||||
var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
|
||||
var multiple = (parameter.type == ParameterType.select_multiple ? 'multiple' : '')
|
||||
var options = (parameter.options || [])
|
||||
.map((option) => `<option value="${option.value}">${option.label}</option>`)
|
||||
.join("")
|
||||
var multiple = parameter.type == ParameterType.select_multiple ? "multiple" : ""
|
||||
return `<select id="${parameter.id}" name="${parameter.id}" ${multiple}>${options}</select>`
|
||||
case ParameterType.slider:
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" class="editor-slider" type="range" value="${parameter.default}" min="${parameter.slider_min}" max="${parameter.slider_max}" oninput="sliderUpdate(event)"> <input id="${parameter.id}-input" name="${parameter.id}-input" size="4" value="${parameter.default}" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)"> ${parameter.slider_unit}`
|
||||
case ParameterType.custom:
|
||||
return parameter.render(parameter)
|
||||
default:
|
||||
console.error(`Invalid type ${parameter.type} for parameter ${parameter.id}`);
|
||||
console.error(`Invalid type ${parameter.type} for parameter ${parameter.id}`)
|
||||
return "ERROR: Invalid Type"
|
||||
}
|
||||
}
|
||||
@ -265,31 +271,31 @@ let parametersTable = document.querySelector("#system-settings .parameters-table
|
||||
* @param {Array<Parameter> | undefined} parameters
|
||||
* */
|
||||
function initParameters(parameters) {
|
||||
parameters.forEach(parameter => {
|
||||
parameters.forEach((parameter) => {
|
||||
const element = getParameterElement(parameter)
|
||||
const elementWrapper = createElement('div')
|
||||
const elementWrapper = createElement("div")
|
||||
if (element instanceof Node) {
|
||||
elementWrapper.appendChild(element)
|
||||
} else {
|
||||
elementWrapper.innerHTML = element
|
||||
}
|
||||
|
||||
const note = typeof parameter.note === 'function' ? parameter.note(parameter) : parameter.note
|
||||
const note = typeof parameter.note === "function" ? parameter.note(parameter) : parameter.note
|
||||
const noteElements = []
|
||||
if (note) {
|
||||
const noteElement = createElement('small')
|
||||
const noteElement = createElement("small")
|
||||
if (note instanceof Node) {
|
||||
noteElement.appendChild(note)
|
||||
} else {
|
||||
noteElement.innerHTML = note || ''
|
||||
noteElement.innerHTML = note || ""
|
||||
}
|
||||
noteElements.push(noteElement)
|
||||
}
|
||||
|
||||
const icon = parameter.icon ? [createElement('i', undefined, ['fa', parameter.icon])] : []
|
||||
const icon = parameter.icon ? [createElement("i", undefined, ["fa", parameter.icon])] : []
|
||||
|
||||
const label = typeof parameter.label === 'function' ? parameter.label(parameter) : parameter.label
|
||||
const labelElement = createElement('label', { for: parameter.id })
|
||||
const label = typeof parameter.label === "function" ? parameter.label(parameter) : parameter.label
|
||||
const labelElement = createElement("label", { for: parameter.id })
|
||||
if (label instanceof Node) {
|
||||
labelElement.appendChild(label)
|
||||
} else {
|
||||
@ -297,13 +303,13 @@ function initParameters(parameters) {
|
||||
}
|
||||
|
||||
const newrow = createElement(
|
||||
'div',
|
||||
{ 'data-setting-id': parameter.id, 'data-save-in-app-config': parameter.saveInAppConfig },
|
||||
"div",
|
||||
{ "data-setting-id": parameter.id, "data-save-in-app-config": parameter.saveInAppConfig },
|
||||
undefined,
|
||||
[
|
||||
createElement('div', undefined, undefined, icon),
|
||||
createElement('div', undefined, undefined, [labelElement, ...noteElements]),
|
||||
elementWrapper,
|
||||
createElement("div", undefined, undefined, icon),
|
||||
createElement("div", undefined, undefined, [labelElement, ...noteElements]),
|
||||
elementWrapper
|
||||
]
|
||||
)
|
||||
parametersTable.appendChild(newrow)
|
||||
@ -314,22 +320,25 @@ function initParameters(parameters) {
|
||||
initParameters(PARAMETERS)
|
||||
|
||||
// listen to parameters from plugins
|
||||
PARAMETERS.addEventListener('push', (...items) => {
|
||||
PARAMETERS.addEventListener("push", (...items) => {
|
||||
initParameters(items)
|
||||
|
||||
if (items.find(item => item.saveInAppConfig)) {
|
||||
console.log('Reloading app config for new parameters', items.map(p => p.id))
|
||||
|
||||
if (items.find((item) => item.saveInAppConfig)) {
|
||||
console.log(
|
||||
"Reloading app config for new parameters",
|
||||
items.map((p) => p.id)
|
||||
)
|
||||
getAppConfig()
|
||||
}
|
||||
})
|
||||
|
||||
let vramUsageLevelField = document.querySelector('#vram_usage_level')
|
||||
let useCPUField = document.querySelector('#use_cpu')
|
||||
let autoPickGPUsField = document.querySelector('#auto_pick_gpus')
|
||||
let useGPUsField = document.querySelector('#use_gpus')
|
||||
let saveToDiskField = document.querySelector('#save_to_disk')
|
||||
let diskPathField = document.querySelector('#diskPath')
|
||||
let metadataOutputFormatField = document.querySelector('#metadata_output_format')
|
||||
let vramUsageLevelField = document.querySelector("#vram_usage_level")
|
||||
let useCPUField = document.querySelector("#use_cpu")
|
||||
let autoPickGPUsField = document.querySelector("#auto_pick_gpus")
|
||||
let useGPUsField = document.querySelector("#use_gpus")
|
||||
let saveToDiskField = document.querySelector("#save_to_disk")
|
||||
let diskPathField = document.querySelector("#diskPath")
|
||||
let metadataOutputFormatField = document.querySelector("#metadata_output_format")
|
||||
let listenToNetworkField = document.querySelector("#listen_to_network")
|
||||
let listenPortField = document.querySelector("#listen_port")
|
||||
let useBetaChannelField = document.querySelector("#use_beta_channel")
|
||||
@ -337,35 +346,34 @@ let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_star
|
||||
let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions")
|
||||
let testDiffusers = document.querySelector("#test_diffusers")
|
||||
|
||||
let saveSettingsBtn = document.querySelector('#save-system-settings-btn')
|
||||
|
||||
let saveSettingsBtn = document.querySelector("#save-system-settings-btn")
|
||||
|
||||
async function changeAppConfig(configDelta) {
|
||||
try {
|
||||
let res = await fetch('/app_config', {
|
||||
method: 'POST',
|
||||
let res = await fetch("/app_config", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(configDelta)
|
||||
})
|
||||
res = await res.json()
|
||||
|
||||
console.log('set config status response', res)
|
||||
console.log("set config status response", res)
|
||||
} catch (e) {
|
||||
console.log('set config status error', e)
|
||||
console.log("set config status error", e)
|
||||
}
|
||||
}
|
||||
|
||||
async function getAppConfig() {
|
||||
try {
|
||||
let res = await fetch('/get/app_config')
|
||||
let res = await fetch("/get/app_config")
|
||||
const config = await res.json()
|
||||
|
||||
applySettingsFromConfig(config)
|
||||
|
||||
// custom overrides
|
||||
if (config.update_branch === 'beta') {
|
||||
if (config.update_branch === "beta") {
|
||||
useBetaChannelField.checked = true
|
||||
document.querySelector("#updateBranchLabel").innerText = "(beta)"
|
||||
} else {
|
||||
@ -380,45 +388,48 @@ async function getAppConfig() {
|
||||
if (config.net && config.net.listen_port !== undefined) {
|
||||
listenPortField.value = config.net.listen_port
|
||||
}
|
||||
if (config.test_diffusers === undefined || config.update_branch === 'main') {
|
||||
if (config.test_diffusers === undefined || config.update_branch === "main") {
|
||||
testDiffusers.checked = false
|
||||
document.querySelector("#lora_model_container").style.display = 'none'
|
||||
document.querySelector("#lora_alpha_container").style.display = 'none'
|
||||
document.querySelector("#lora_model_container").style.display = "none"
|
||||
document.querySelector("#lora_alpha_container").style.display = "none"
|
||||
} else {
|
||||
testDiffusers.checked = config.test_diffusers && config.update_branch !== 'main'
|
||||
document.querySelector("#lora_model_container").style.display = (testDiffusers.checked ? '' : 'none')
|
||||
document.querySelector("#lora_alpha_container").style.display = (testDiffusers.checked && loraModelField.value !== "" ? '' : 'none')
|
||||
testDiffusers.checked = config.test_diffusers && config.update_branch !== "main"
|
||||
document.querySelector("#lora_model_container").style.display = testDiffusers.checked ? "" : "none"
|
||||
document.querySelector("#lora_alpha_container").style.display =
|
||||
testDiffusers.checked && loraModelField.value !== "" ? "" : "none"
|
||||
}
|
||||
|
||||
console.log('get config status response', config)
|
||||
console.log("get config status response", config)
|
||||
|
||||
return config
|
||||
} catch (e) {
|
||||
console.log('get config status error', e)
|
||||
console.log("get config status error", e)
|
||||
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
function applySettingsFromConfig(config) {
|
||||
Array.from(parametersTable.children).forEach(parameterRow => {
|
||||
if (parameterRow.dataset.settingId in config && parameterRow.dataset.saveInAppConfig === 'true') {
|
||||
Array.from(parametersTable.children).forEach((parameterRow) => {
|
||||
if (parameterRow.dataset.settingId in config && parameterRow.dataset.saveInAppConfig === "true") {
|
||||
const configValue = config[parameterRow.dataset.settingId]
|
||||
const parameterElement = document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector('input') || parameterRow.querySelector('select')
|
||||
const parameterElement =
|
||||
document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector("input") ||
|
||||
parameterRow.querySelector("select")
|
||||
|
||||
switch (parameterElement?.tagName) {
|
||||
case 'INPUT':
|
||||
if (parameterElement.type === 'checkbox') {
|
||||
case "INPUT":
|
||||
if (parameterElement.type === "checkbox") {
|
||||
parameterElement.checked = configValue
|
||||
} else {
|
||||
parameterElement.value = configValue
|
||||
}
|
||||
parameterElement.dispatchEvent(new Event('change'))
|
||||
parameterElement.dispatchEvent(new Event("change"))
|
||||
break
|
||||
case 'SELECT':
|
||||
case "SELECT":
|
||||
if (Array.isArray(configValue)) {
|
||||
Array.from(parameterElement.options).forEach(option => {
|
||||
Array.from(parameterElement.options).forEach((option) => {
|
||||
if (configValue.includes(option.value || option.text)) {
|
||||
option.selected = true
|
||||
}
|
||||
@ -426,82 +437,85 @@ function applySettingsFromConfig(config) {
|
||||
} else {
|
||||
parameterElement.value = configValue
|
||||
}
|
||||
parameterElement.dispatchEvent(new Event('change'))
|
||||
parameterElement.dispatchEvent(new Event("change"))
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
saveToDiskField.addEventListener('change', function(e) {
|
||||
saveToDiskField.addEventListener("change", function(e) {
|
||||
diskPathField.disabled = !this.checked
|
||||
metadataOutputFormatField.disabled = !this.checked
|
||||
})
|
||||
|
||||
function getCurrentRenderDeviceSelection() {
|
||||
let selectedGPUs = $('#use_gpus').val()
|
||||
let selectedGPUs = $("#use_gpus").val()
|
||||
|
||||
if (useCPUField.checked && !autoPickGPUsField.checked) {
|
||||
return 'cpu'
|
||||
return "cpu"
|
||||
}
|
||||
if (autoPickGPUsField.checked || selectedGPUs.length == 0) {
|
||||
return 'auto'
|
||||
return "auto"
|
||||
}
|
||||
|
||||
return selectedGPUs.join(',')
|
||||
return selectedGPUs.join(",")
|
||||
}
|
||||
|
||||
useCPUField.addEventListener('click', function() {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
|
||||
useCPUField.addEventListener("click", function() {
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry("auto_pick_gpus")
|
||||
if (this.checked) {
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
autoPickGPUSettingEntry.style.display = 'none'
|
||||
autoPickGPUsField.setAttribute('data-old-value', autoPickGPUsField.checked)
|
||||
gpuSettingEntry.style.display = "none"
|
||||
autoPickGPUSettingEntry.style.display = "none"
|
||||
autoPickGPUsField.setAttribute("data-old-value", autoPickGPUsField.checked)
|
||||
autoPickGPUsField.checked = false
|
||||
} else if (useGPUsField.options.length >= MIN_GPUS_TO_SHOW_SELECTION) {
|
||||
gpuSettingEntry.style.display = ''
|
||||
autoPickGPUSettingEntry.style.display = ''
|
||||
let oldVal = autoPickGPUsField.getAttribute('data-old-value')
|
||||
if (oldVal === null || oldVal === undefined) { // the UI started with CPU selected by default
|
||||
gpuSettingEntry.style.display = ""
|
||||
autoPickGPUSettingEntry.style.display = ""
|
||||
let oldVal = autoPickGPUsField.getAttribute("data-old-value")
|
||||
if (oldVal === null || oldVal === undefined) {
|
||||
// the UI started with CPU selected by default
|
||||
autoPickGPUsField.checked = true
|
||||
} else {
|
||||
autoPickGPUsField.checked = (oldVal === 'true')
|
||||
autoPickGPUsField.checked = oldVal === "true"
|
||||
}
|
||||
gpuSettingEntry.style.display = (autoPickGPUsField.checked ? 'none' : '')
|
||||
gpuSettingEntry.style.display = autoPickGPUsField.checked ? "none" : ""
|
||||
}
|
||||
})
|
||||
|
||||
useGPUsField.addEventListener('click', function() {
|
||||
let selectedGPUs = $('#use_gpus').val()
|
||||
autoPickGPUsField.checked = (selectedGPUs.length === 0)
|
||||
useGPUsField.addEventListener("click", function() {
|
||||
let selectedGPUs = $("#use_gpus").val()
|
||||
autoPickGPUsField.checked = selectedGPUs.length === 0
|
||||
})
|
||||
|
||||
autoPickGPUsField.addEventListener('click', function() {
|
||||
autoPickGPUsField.addEventListener("click", function() {
|
||||
if (this.checked) {
|
||||
$('#use_gpus').val([])
|
||||
$("#use_gpus").val([])
|
||||
}
|
||||
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
gpuSettingEntry.style.display = (this.checked ? 'none' : '')
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
gpuSettingEntry.style.display = this.checked ? "none" : ""
|
||||
})
|
||||
|
||||
async function setDiskPath(defaultDiskPath, force=false) {
|
||||
async function setDiskPath(defaultDiskPath, force = false) {
|
||||
var diskPath = getSetting("diskPath")
|
||||
if (force || diskPath == '' || diskPath == undefined || diskPath == "undefined") {
|
||||
if (force || diskPath == "" || diskPath == undefined || diskPath == "undefined") {
|
||||
setSetting("diskPath", defaultDiskPath)
|
||||
}
|
||||
}
|
||||
|
||||
function setDeviceInfo(devices) {
|
||||
let cpu = devices.all.cpu.name
|
||||
let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
|
||||
let allGPUs = Object.keys(devices.all).filter((d) => d != "cpu")
|
||||
let activeGPUs = Object.keys(devices.active)
|
||||
|
||||
function ID_TO_TEXT(d) {
|
||||
let info = devices.all[d]
|
||||
if ("mem_free" in info && "mem_total" in info) {
|
||||
return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
|
||||
return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(
|
||||
1
|
||||
)} Gb total)</small>`
|
||||
} else {
|
||||
return `${info.name} <small>(${d}) (no memory info)</small>`
|
||||
}
|
||||
@ -510,35 +524,35 @@ function setDeviceInfo(devices) {
|
||||
allGPUs = allGPUs.map(ID_TO_TEXT)
|
||||
activeGPUs = activeGPUs.map(ID_TO_TEXT)
|
||||
|
||||
let systemInfoEl = document.querySelector('#system-info')
|
||||
systemInfoEl.querySelector('#system-info-cpu').innerText = cpu
|
||||
systemInfoEl.querySelector('#system-info-gpus-all').innerHTML = allGPUs.join('</br>')
|
||||
systemInfoEl.querySelector('#system-info-rendering-devices').innerHTML = activeGPUs.join('</br>')
|
||||
let systemInfoEl = document.querySelector("#system-info")
|
||||
systemInfoEl.querySelector("#system-info-cpu").innerText = cpu
|
||||
systemInfoEl.querySelector("#system-info-gpus-all").innerHTML = allGPUs.join("</br>")
|
||||
systemInfoEl.querySelector("#system-info-rendering-devices").innerHTML = activeGPUs.join("</br>")
|
||||
}
|
||||
|
||||
function setHostInfo(hosts) {
|
||||
let port = listenPortField.value
|
||||
hosts = hosts.map(addr => `http://${addr}:${port}/`).map(url => `<div><a href="${url}">${url}</a></div>`)
|
||||
document.querySelector('#system-info-server-hosts').innerHTML = hosts.join('')
|
||||
hosts = hosts.map((addr) => `http://${addr}:${port}/`).map((url) => `<div><a href="${url}">${url}</a></div>`)
|
||||
document.querySelector("#system-info-server-hosts").innerHTML = hosts.join("")
|
||||
}
|
||||
|
||||
async function getSystemInfo() {
|
||||
try {
|
||||
const res = await SD.getSystemInfo()
|
||||
let devices = res['devices']
|
||||
let devices = res["devices"]
|
||||
|
||||
let allDeviceIds = Object.keys(devices['all']).filter(d => d !== 'cpu')
|
||||
let activeDeviceIds = Object.keys(devices['active']).filter(d => d !== 'cpu')
|
||||
let allDeviceIds = Object.keys(devices["all"]).filter((d) => d !== "cpu")
|
||||
let activeDeviceIds = Object.keys(devices["active"]).filter((d) => d !== "cpu")
|
||||
|
||||
if (activeDeviceIds.length === 0) {
|
||||
useCPUField.checked = true
|
||||
}
|
||||
|
||||
if (allDeviceIds.length < MIN_GPUS_TO_SHOW_SELECTION || useCPUField.checked) {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
|
||||
autoPickGPUSettingEntry.style.display = 'none'
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
gpuSettingEntry.style.display = "none"
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry("auto_pick_gpus")
|
||||
autoPickGPUSettingEntry.style.display = "none"
|
||||
}
|
||||
|
||||
if (allDeviceIds.length === 0) {
|
||||
@ -546,86 +560,90 @@ async function getSystemInfo() {
|
||||
useCPUField.disabled = true // no compatible GPUs, so make the CPU mandatory
|
||||
}
|
||||
|
||||
autoPickGPUsField.checked = (devices['config'] === 'auto')
|
||||
autoPickGPUsField.checked = devices["config"] === "auto"
|
||||
|
||||
useGPUsField.innerHTML = ''
|
||||
allDeviceIds.forEach(device => {
|
||||
let deviceName = devices['all'][device]['name']
|
||||
useGPUsField.innerHTML = ""
|
||||
allDeviceIds.forEach((device) => {
|
||||
let deviceName = devices["all"][device]["name"]
|
||||
let deviceOption = `<option value="${device}">${deviceName} (${device})</option>`
|
||||
useGPUsField.insertAdjacentHTML('beforeend', deviceOption)
|
||||
useGPUsField.insertAdjacentHTML("beforeend", deviceOption)
|
||||
})
|
||||
|
||||
if (autoPickGPUsField.checked) {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
gpuSettingEntry.style.display = "none"
|
||||
} else {
|
||||
$('#use_gpus').val(activeDeviceIds)
|
||||
$("#use_gpus").val(activeDeviceIds)
|
||||
}
|
||||
|
||||
setDeviceInfo(devices)
|
||||
setHostInfo(res['hosts'])
|
||||
setHostInfo(res["hosts"])
|
||||
let force = false
|
||||
if (res['enforce_output_dir'] !== undefined) {
|
||||
force = res['enforce_output_dir']
|
||||
if (res["enforce_output_dir"] !== undefined) {
|
||||
force = res["enforce_output_dir"]
|
||||
if (force == true) {
|
||||
saveToDiskField.checked = true
|
||||
metadataOutputFormatField.disabled = false
|
||||
saveToDiskField.checked = true
|
||||
metadataOutputFormatField.disabled = false
|
||||
}
|
||||
saveToDiskField.disabled = force
|
||||
diskPathField.disabled = force
|
||||
}
|
||||
setDiskPath(res['default_output_dir'], force)
|
||||
setDiskPath(res["default_output_dir"], force)
|
||||
} catch (e) {
|
||||
console.log('error fetching devices', e)
|
||||
console.log("error fetching devices", e)
|
||||
}
|
||||
}
|
||||
|
||||
saveSettingsBtn.addEventListener('click', function() {
|
||||
if (listenPortField.value == '') {
|
||||
alert('The network port field must not be empty.')
|
||||
saveSettingsBtn.addEventListener("click", function() {
|
||||
if (listenPortField.value == "") {
|
||||
alert("The network port field must not be empty.")
|
||||
return
|
||||
}
|
||||
if (listenPortField.value < 1 || listenPortField.value > 65535) {
|
||||
alert('The network port must be a number from 1 to 65535')
|
||||
alert("The network port must be a number from 1 to 65535")
|
||||
return
|
||||
}
|
||||
const updateBranch = (useBetaChannelField.checked ? 'beta' : 'main')
|
||||
const updateBranch = useBetaChannelField.checked ? "beta" : "main"
|
||||
|
||||
const updateAppConfigRequest = {
|
||||
'render_devices': getCurrentRenderDeviceSelection(),
|
||||
'update_branch': updateBranch,
|
||||
render_devices: getCurrentRenderDeviceSelection(),
|
||||
update_branch: updateBranch
|
||||
}
|
||||
|
||||
Array.from(parametersTable.children).forEach(parameterRow => {
|
||||
if (parameterRow.dataset.saveInAppConfig === 'true') {
|
||||
const parameterElement = document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector('input') || parameterRow.querySelector('select')
|
||||
Array.from(parametersTable.children).forEach((parameterRow) => {
|
||||
if (parameterRow.dataset.saveInAppConfig === "true") {
|
||||
const parameterElement =
|
||||
document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector("input") ||
|
||||
parameterRow.querySelector("select")
|
||||
|
||||
switch (parameterElement?.tagName) {
|
||||
case 'INPUT':
|
||||
if (parameterElement.type === 'checkbox') {
|
||||
case "INPUT":
|
||||
if (parameterElement.type === "checkbox") {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.checked
|
||||
} else {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.value
|
||||
}
|
||||
break
|
||||
case 'SELECT':
|
||||
case "SELECT":
|
||||
if (parameterElement.multiple) {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = Array.from(parameterElement.options)
|
||||
.filter(option => option.selected)
|
||||
.map(option => option.value || option.text)
|
||||
.filter((option) => option.selected)
|
||||
.map((option) => option.value || option.text)
|
||||
} else {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.value
|
||||
}
|
||||
break
|
||||
default:
|
||||
console.error(`Setting parameter ${parameterRow.dataset.settingId} couldn't be saved to app.config - element #${parameter.id} is a <${parameterElement?.tagName} /> instead of a <input /> or a <select />!`)
|
||||
console.error(
|
||||
`Setting parameter ${parameterRow.dataset.settingId} couldn't be saved to app.config - element #${parameter.id} is a <${parameterElement?.tagName} /> instead of a <input /> or a <select />!`
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const savePromise = changeAppConfig(updateAppConfigRequest)
|
||||
saveSettingsBtn.classList.add('active')
|
||||
Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove('active'))
|
||||
saveSettingsBtn.classList.add("active")
|
||||
Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove("active"))
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user