extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-04-20 09:28:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use ES5 style trailing commas, to avoid unnecessary lines during code diffs

Browse Source
This commit is contained in:
cmdr2 2023-04-28 15:50:44 +05:30
parent 3000e53cc0
commit 469585ddda
24 changed files with 409 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ const SETTINGS_IDS_LIST = [
"auto_scroll", "auto_scroll",
"zip_toggle", "zip_toggle",
"tree_toggle", "tree_toggle",
"json_toggle" "json_toggle",
] ]
const IGNORE_BY_DEFAULT = ["prompt"] const IGNORE_BY_DEFAULT = ["prompt"]
@ -62,7 +62,7 @@ const SETTINGS_SECTIONS = [
{ id: "editor-inputs", name: "Prompt" }, { id: "editor-inputs", name: "Prompt" },
{ id: "editor-settings", name: "Image Settings" }, { id: "editor-settings", name: "Image Settings" },
{ id: "system-settings", name: "System Settings" }, { id: "system-settings", name: "System Settings" },
{ id: "container", name: "Other" } { id: "container", name: "Other" },
] ]
async function initSettings() { async function initSettings() {
@ -81,7 +81,7 @@ async function initSettings() {
label: getSettingLabel(element), label: getSettingLabel(element),
default: getSetting(element), default: getSetting(element),
value: getSetting(element), value: getSetting(element),
ignore: IGNORE_BY_DEFAULT.includes(id) ignore: IGNORE_BY_DEFAULT.includes(id),
} }
element.addEventListener("input", settingChangeHandler) element.addEventListener("input", settingChangeHandler)
element.addEventListener("change", settingChangeHandler) element.addEventListener("change", settingChangeHandler)
@ -139,7 +139,7 @@ function saveSettings() {
return { return {
key: setting.key, key: setting.key,
value: setting.value, value: setting.value,
ignore: setting.ignore ignore: setting.ignore,
} }
}) })
localStorage.setItem(SETTINGS_KEY, JSON.stringify(saved_settings)) localStorage.setItem(SETTINGS_KEY, JSON.stringify(saved_settings))
@ -265,7 +265,7 @@ function tryLoadOldSettings() {
// load v1 auto-save.js settings // load v1 auto-save.js settings
var old_map = { var old_map = {
guidance_scale_slider: "guidance_scale", guidance_scale_slider: "guidance_scale",
prompt_strength_slider: "prompt_strength" prompt_strength_slider: "prompt_strength",
} }
var settings_key_v1 = "user_settings" var settings_key_v1 = "user_settings"
var saved_settings_text = localStorage.getItem(settings_key_v1) var saved_settings_text = localStorage.getItem(settings_key_v1)
@ -300,7 +300,7 @@ function tryLoadOldSettings() {
showOnlyFilteredImage: "show_only_filtered_image", showOnlyFilteredImage: "show_only_filtered_image",
streamImageProgress: "stream_image_progress", streamImageProgress: "stream_image_progress",
outputFormat: "output_format", outputFormat: "output_format",
autoSaveSettings: "auto_save_settings" autoSaveSettings: "auto_save_settings",
} }
Object.keys(individual_settings_map).forEach((localStorageKey) => { Object.keys(individual_settings_map).forEach((localStorageKey) => {
var localStorageValue = localStorage.getItem(localStorageKey) var localStorageValue = localStorage.getItem(localStorageKey)

64
ui/media/js/dnd.js
View File

@ -44,7 +44,7 @@ const TASK_MAPPING = {
promptField.value = prompt promptField.value = prompt
}, },
readUI: () => promptField.value, readUI: () => promptField.value,
parse: (val) => val parse: (val) => val,
}, },
negative_prompt: { negative_prompt: {
name: "Negative Prompt", name: "Negative Prompt",
@ -52,7 +52,7 @@ const TASK_MAPPING = {
negativePromptField.value = negative_prompt negativePromptField.value = negative_prompt
}, },
readUI: () => negativePromptField.value, readUI: () => negativePromptField.value,
parse: (val) => val parse: (val) => val,
}, },
active_tags: { active_tags: {
name: "Image Modifiers", name: "Image Modifiers",
@ -60,7 +60,7 @@ const TASK_MAPPING = {
refreshModifiersState(active_tags) refreshModifiersState(active_tags)
}, },
readUI: () => activeTags.map((x) => x.name), readUI: () => activeTags.map((x) => x.name),
parse: (val) => val parse: (val) => val,
}, },
inactive_tags: { inactive_tags: {
name: "Inactive Image Modifiers", name: "Inactive Image Modifiers",
@ -68,7 +68,7 @@ const TASK_MAPPING = {
refreshInactiveTags(inactive_tags) refreshInactiveTags(inactive_tags)
}, },
readUI: () => activeTags.filter((tag) => tag.inactive === true).map((x) => x.name), readUI: () => activeTags.filter((tag) => tag.inactive === true).map((x) => x.name),
parse: (val) => val parse: (val) => val,
}, },
width: { width: {
name: "Width", name: "Width",
@ -80,7 +80,7 @@ const TASK_MAPPING = {
} }
}, },
readUI: () => parseInt(widthField.value), readUI: () => parseInt(widthField.value),
parse: (val) => parseInt(val) parse: (val) => parseInt(val),
}, },
height: { height: {
name: "Height", name: "Height",
@ -92,7 +92,7 @@ const TASK_MAPPING = {
} }
}, },
readUI: () => parseInt(heightField.value), readUI: () => parseInt(heightField.value),
parse: (val) => parseInt(val) parse: (val) => parseInt(val),
}, },
seed: { seed: {
name: "Seed", name: "Seed",
@ -109,7 +109,7 @@ const TASK_MAPPING = {
seedField.value = seed seedField.value = seed
}, },
readUI: () => parseInt(seedField.value), // just return the value the user is seeing in the UI readUI: () => parseInt(seedField.value), // just return the value the user is seeing in the UI
parse: (val) => parseInt(val) parse: (val) => parseInt(val),
}, },
num_inference_steps: { num_inference_steps: {
name: "Steps", name: "Steps",
@ -117,7 +117,7 @@ const TASK_MAPPING = {
numInferenceStepsField.value = num_inference_steps numInferenceStepsField.value = num_inference_steps
}, },
readUI: () => parseInt(numInferenceStepsField.value), readUI: () => parseInt(numInferenceStepsField.value),
parse: (val) => parseInt(val) parse: (val) => parseInt(val),
}, },
guidance_scale: { guidance_scale: {
name: "Guidance Scale", name: "Guidance Scale",
@ -126,7 +126,7 @@ const TASK_MAPPING = {
updateGuidanceScaleSlider() updateGuidanceScaleSlider()
}, },
readUI: () => parseFloat(guidanceScaleField.value), readUI: () => parseFloat(guidanceScaleField.value),
parse: (val) => parseFloat(val) parse: (val) => parseFloat(val),
}, },
prompt_strength: { prompt_strength: {
name: "Prompt Strength", name: "Prompt Strength",
@ -135,7 +135,7 @@ const TASK_MAPPING = {
updatePromptStrengthSlider() updatePromptStrengthSlider()
}, },
readUI: () => parseFloat(promptStrengthField.value), readUI: () => parseFloat(promptStrengthField.value),
parse: (val) => parseFloat(val) parse: (val) => parseFloat(val),
}, },
init_image: { init_image: {
@ -144,7 +144,7 @@ const TASK_MAPPING = {
initImagePreview.src = init_image initImagePreview.src = init_image
}, },
readUI: () => initImagePreview.src, readUI: () => initImagePreview.src,
parse: (val) => val parse: (val) => val,
}, },
mask: { mask: {
name: "Mask", name: "Mask",
@ -156,7 +156,7 @@ const TASK_MAPPING = {
maskSetting.checked = Boolean(mask) maskSetting.checked = Boolean(mask)
}, },
readUI: () => (maskSetting.checked ? imageInpainter.getImg() : undefined), readUI: () => (maskSetting.checked ? imageInpainter.getImg() : undefined),
parse: (val) => val parse: (val) => val,
}, },
preserve_init_image_color_profile: { preserve_init_image_color_profile: {
name: "Preserve Color Profile", name: "Preserve Color Profile",
@ -164,7 +164,7 @@ const TASK_MAPPING = {
applyColorCorrectionField.checked = parseBoolean(preserve_init_image_color_profile) applyColorCorrectionField.checked = parseBoolean(preserve_init_image_color_profile)
}, },
readUI: () => applyColorCorrectionField.checked, readUI: () => applyColorCorrectionField.checked,
parse: (val) => parseBoolean(val) parse: (val) => parseBoolean(val),
}, },
use_face_correction: { use_face_correction: {
@ -186,7 +186,7 @@ const TASK_MAPPING = {
//useFaceCorrectionField.checked = parseBoolean(use_face_correction) //useFaceCorrectionField.checked = parseBoolean(use_face_correction)
}, },
readUI: () => (useFaceCorrectionField.checked ? gfpganModelField.value : undefined), readUI: () => (useFaceCorrectionField.checked ? gfpganModelField.value : undefined),
parse: (val) => val parse: (val) => val,
}, },
use_upscale: { use_upscale: {
name: "Use Upscaling", name: "Use Upscaling",
@ -207,7 +207,7 @@ const TASK_MAPPING = {
} }
}, },
readUI: () => (useUpscalingField.checked ? upscaleModelField.value : undefined), readUI: () => (useUpscalingField.checked ? upscaleModelField.value : undefined),
parse: (val) => val parse: (val) => val,
}, },
upscale_amount: { upscale_amount: {
name: "Upscale By", name: "Upscale By",
@ -215,7 +215,7 @@ const TASK_MAPPING = {
upscaleAmountField.value = upscale_amount upscaleAmountField.value = upscale_amount
}, },
readUI: () => upscaleAmountField.value, readUI: () => upscaleAmountField.value,
parse: (val) => val parse: (val) => val,
}, },
sampler_name: { sampler_name: {
name: "Sampler", name: "Sampler",
@ -223,7 +223,7 @@ const TASK_MAPPING = {
samplerField.value = sampler_name samplerField.value = sampler_name
}, },
readUI: () => samplerField.value, readUI: () => samplerField.value,
parse: (val) => val parse: (val) => val,
}, },
use_stable_diffusion_model: { use_stable_diffusion_model: {
name: "Stable Diffusion model", name: "Stable Diffusion model",
@ -238,7 +238,7 @@ const TASK_MAPPING = {
} }
}, },
readUI: () => stableDiffusionModelField.value, readUI: () => stableDiffusionModelField.value,
parse: (val) => val parse: (val) => val,
}, },
use_vae_model: { use_vae_model: {
name: "VAE model", name: "VAE model",
@ -254,7 +254,7 @@ const TASK_MAPPING = {
vaeModelField.value = use_vae_model vaeModelField.value = use_vae_model
}, },
readUI: () => vaeModelField.value, readUI: () => vaeModelField.value,
parse: (val) => val parse: (val) => val,
}, },
use_lora_model: { use_lora_model: {
name: "LoRA model", name: "LoRA model",
@ -272,7 +272,7 @@ const TASK_MAPPING = {
loraModelField.value = use_lora_model loraModelField.value = use_lora_model
}, },
readUI: () => loraModelField.value, readUI: () => loraModelField.value,
parse: (val) => val parse: (val) => val,
}, },
lora_alpha: { lora_alpha: {
name: "LoRA Strength", name: "LoRA Strength",
@ -281,7 +281,7 @@ const TASK_MAPPING = {
updateLoraAlphaSlider() updateLoraAlphaSlider()
}, },
readUI: () => parseFloat(loraAlphaField.value), readUI: () => parseFloat(loraAlphaField.value),
parse: (val) => parseFloat(val) parse: (val) => parseFloat(val),
}, },
use_hypernetwork_model: { use_hypernetwork_model: {
name: "Hypernetwork model", name: "Hypernetwork model",
@ -302,7 +302,7 @@ const TASK_MAPPING = {
hypernetworkModelField.dispatchEvent(new Event("change")) hypernetworkModelField.dispatchEvent(new Event("change"))
}, },
readUI: () => hypernetworkModelField.value, readUI: () => hypernetworkModelField.value,
parse: (val) => val parse: (val) => val,
}, },
hypernetwork_strength: { hypernetwork_strength: {
name: "Hypernetwork Strength", name: "Hypernetwork Strength",
@ -311,7 +311,7 @@ const TASK_MAPPING = {
updateHypernetworkStrengthSlider() updateHypernetworkStrengthSlider()
}, },
readUI: () => parseFloat(hypernetworkStrengthField.value), readUI: () => parseFloat(hypernetworkStrengthField.value),
parse: (val) => parseFloat(val) parse: (val) => parseFloat(val),
}, },
num_outputs: { num_outputs: {
@ -320,7 +320,7 @@ const TASK_MAPPING = {
numOutputsParallelField.value = num_outputs numOutputsParallelField.value = num_outputs
}, },
readUI: () => parseInt(numOutputsParallelField.value), readUI: () => parseInt(numOutputsParallelField.value),
parse: (val) => val parse: (val) => val,
}, },
use_cpu: { use_cpu: {
@ -329,7 +329,7 @@ const TASK_MAPPING = {
useCPUField.checked = use_cpu useCPUField.checked = use_cpu
}, },
readUI: () => useCPUField.checked, readUI: () => useCPUField.checked,
parse: (val) => val parse: (val) => val,
}, },
stream_image_progress: { stream_image_progress: {
@ -338,7 +338,7 @@ const TASK_MAPPING = {
streamImageProgressField.checked = parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress streamImageProgressField.checked = parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress
}, },
readUI: () => streamImageProgressField.checked, readUI: () => streamImageProgressField.checked,
parse: (val) => Boolean(val) parse: (val) => Boolean(val),
}, },
show_only_filtered_image: { show_only_filtered_image: {
name: "Show only the corrected/upscaled image", name: "Show only the corrected/upscaled image",
@ -346,7 +346,7 @@ const TASK_MAPPING = {
showOnlyFilteredImageField.checked = show_only_filtered_image showOnlyFilteredImageField.checked = show_only_filtered_image
}, },
readUI: () => showOnlyFilteredImageField.checked, readUI: () => showOnlyFilteredImageField.checked,
parse: (val) => Boolean(val) parse: (val) => Boolean(val),
}, },
output_format: { output_format: {
name: "Output Format", name: "Output Format",
@ -354,7 +354,7 @@ const TASK_MAPPING = {
outputFormatField.value = output_format outputFormatField.value = output_format
}, },
readUI: () => outputFormatField.value, readUI: () => outputFormatField.value,
parse: (val) => val parse: (val) => val,
}, },
save_to_disk_path: { save_to_disk_path: {
name: "Save to disk path", name: "Save to disk path",
@ -363,8 +363,8 @@ const TASK_MAPPING = {
diskPathField.value = save_to_disk_path diskPathField.value = save_to_disk_path
}, },
readUI: () => diskPathField.value, readUI: () => diskPathField.value,
parse: (val) => val parse: (val) => val,
} },
} }
function restoreTaskToUI(task, fieldsToSkip) { function restoreTaskToUI(task, fieldsToSkip) {
@ -445,7 +445,7 @@ function readUI() {
return { return {
numOutputsTotal: parseInt(numOutputsTotalField.value), numOutputsTotal: parseInt(numOutputsTotalField.value),
seed: TASK_MAPPING["seed"].readUI(), seed: TASK_MAPPING["seed"].readUI(),
reqBody: reqBody reqBody: reqBody,
} }
} }
function getModelPath(filename, extensions) { function getModelPath(filename, extensions) {
@ -485,7 +485,7 @@ const TASK_TEXT_MAPPING = {
negative_prompt: "Negative Prompt", negative_prompt: "Negative Prompt",
use_stable_diffusion_model: "Stable Diffusion model", use_stable_diffusion_model: "Stable Diffusion model",
use_hypernetwork_model: "Hypernetwork model", use_hypernetwork_model: "Hypernetwork model",
hypernetwork_strength: "Hypernetwork Strength" hypernetwork_strength: "Hypernetwork Strength",
} }
function parseTaskFromText(str) { function parseTaskFromText(str) {
const taskReqBody = {} const taskReqBody = {}

56
ui/media/js/engine.js
View File

@ -32,8 +32,8 @@
this.#fetchOptions = Object.assign( this.#fetchOptions = Object.assign(
{ {
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
} },
}, },
options options
) )
@ -197,7 +197,7 @@
EVENT_TASK_END, EVENT_TASK_END,
EVENT_TASK_ERROR, EVENT_TASK_ERROR,
EVENT_UNEXPECTED_RESPONSE EVENT_UNEXPECTED_RESPONSE,
] ]
Object.freeze(EVENTS_TYPES) Object.freeze(EVENTS_TYPES)
const eventSource = new GenericEventSource(EVENTS_TYPES) const eventSource = new GenericEventSource(EVENTS_TYPES)
@ -211,7 +211,7 @@
loadingModel: "LoadingModel", loadingModel: "LoadingModel",
online: "Online", online: "Online",
rendering: "Rendering", rendering: "Rendering",
unavailable: "Unavailable" unavailable: "Unavailable",
} }
Object.freeze(ServerStates) Object.freeze(ServerStates)
@ -332,7 +332,7 @@
processing: "processing", processing: "processing",
stopped: "stopped", stopped: "stopped",
completed: "completed", completed: "completed",
failed: "failed" failed: "failed",
} }
Object.freeze(TaskStatus) Object.freeze(TaskStatus)
@ -340,7 +340,7 @@
TaskStatus.init, TaskStatus.init,
TaskStatus.pending, TaskStatus.pending,
TaskStatus.waiting, TaskStatus.waiting,
TaskStatus.processing TaskStatus.processing,
//Don't add status that are final. //Don't add status that are final.
] ]
@ -466,10 +466,10 @@
res = await fetch(url, { res = await fetch(url, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(this._reqBody), body: JSON.stringify(this._reqBody),
signal: abortSignal signal: abortSignal,
}) })
// status_code 503, already a task running. // status_code 503, already a task running.
} while (res.status === 503 && (await asyncDelay(RETRY_DELAY_IF_SERVER_IS_BUSY))) } while (res.status === 503 && (await asyncDelay(RETRY_DELAY_IF_SERVER_IS_BUSY)))
@ -758,7 +758,7 @@
stream_image_progress: "boolean", stream_image_progress: "boolean",
show_only_filtered_image: "boolean", show_only_filtered_image: "boolean",
output_format: "string", output_format: "string",
output_quality: "number" output_quality: "number",
} }
const TASK_DEFAULTS = { const TASK_DEFAULTS = {
sampler_name: "plms", sampler_name: "plms",
@ -774,7 +774,7 @@
block_nsfw: false, block_nsfw: false,
output_format: "png", output_format: "png",
output_quality: 75, output_quality: 75,
output_lossless: false output_lossless: false,
} }
const TASK_OPTIONAL = { const TASK_OPTIONAL = {
device: "string", device: "string",
@ -786,7 +786,7 @@
use_vae_model: "string", use_vae_model: "string",
use_hypernetwork_model: "string", use_hypernetwork_model: "string",
hypernetwork_strength: "number", hypernetwork_strength: "number",
output_lossless: "boolean" output_lossless: "boolean",
} }
// Higer values will result in... // Higer values will result in...
@ -941,7 +941,7 @@
callback: function() { callback: function() {
return progressCallback?.call(this, {}) return progressCallback?.call(this, {})
}, },
status: TaskStatus.processing status: TaskStatus.processing,
}) })
} catch (e) { } catch (e) {
this.abort(err) this.abort(err)
@ -1086,9 +1086,9 @@
let systemInfo = { let systemInfo = {
devices: { devices: {
all: {}, all: {},
active: {} active: {},
}, },
hosts: [] hosts: [],
} }
try { try {
const res = await fetch("/get/system_info") const res = await fetch("/get/system_info")
@ -1117,7 +1117,7 @@
async function getModels() { async function getModels() {
let models = { let models = {
"stable-diffusion": [], "stable-diffusion": [],
vae: [] vae: [],
} }
try { try {
const res = await fetch("/get/models") const res = await fetch("/get/models")
@ -1147,7 +1147,7 @@
const inputPendingOptions = { const inputPendingOptions = {
// Report mouse/pointer move events when queue is empty. // Report mouse/pointer move events when queue is empty.
// Delay idle after mouse moves stops. // Delay idle after mouse moves stops.
includeContinuous: Boolean(task_queue.size <= 0 && concurrent_generators.size <= 0) includeContinuous: Boolean(task_queue.size <= 0 && concurrent_generators.size <= 0),
} }
if (navigator.scheduling.isInputPending(inputPendingOptions)) { if (navigator.scheduling.isInputPending(inputPendingOptions)) {
// Browser/User still active. // Browser/User still active.
@ -1217,7 +1217,7 @@
eventSource.fireEvent(EVENT_TASK_ERROR, { eventSource.fireEvent(EVENT_TASK_ERROR, {
task, task,
generator, generator,
reason: cTsk?.promise?.rejectReason || task.exception reason: cTsk?.promise?.rejectReason || task.exception,
}) })
task_queue.delete(task) task_queue.delete(task)
continue continue
@ -1313,21 +1313,21 @@
render: (...args) => RenderTask.run(...args), render: (...args) => RenderTask.run(...args),
filter: (...args) => FilterTask.run(...args), filter: (...args) => FilterTask.run(...args),
waitUntil waitUntil,
} }
Object.defineProperties(SD, { Object.defineProperties(SD, {
serverState: { serverState: {
configurable: false, configurable: false,
get: () => serverState get: () => serverState,
}, },
isAvailable: { isAvailable: {
configurable: false, configurable: false,
get: () => isServerAvailable() get: () => isServerAvailable(),
}, },
serverCapacity: { serverCapacity: {
configurable: false, configurable: false,
get: () => getServerCapacity() get: () => getServerCapacity(),
}, },
sessionId: { sessionId: {
configurable: false, configurable: false,
@ -1337,21 +1337,21 @@
throw new Error("Can't set sessionId to undefined.") throw new Error("Can't set sessionId to undefined.")
} }
sessionId = val sessionId = val
} },
}, },
MAX_SEED_VALUE: { MAX_SEED_VALUE: {
configurable: false, configurable: false,
get: () => MAX_SEED_VALUE get: () => MAX_SEED_VALUE,
}, },
activeTasks: { activeTasks: {
configurable: false, configurable: false,
get: () => task_queue get: () => task_queue,
} },
}) })
Object.defineProperties(getGlobal(), { Object.defineProperties(getGlobal(), {
SD: { SD: {
configurable: false, configurable: false,
get: () => SD get: () => SD,
}, },
sessionId: { sessionId: {
//TODO Remove in the future in favor of SD.sessionId //TODO Remove in the future in favor of SD.sessionId
@ -1365,7 +1365,7 @@
console.warn("Deprecated window.sessionId has been replaced with SD.sessionId.") console.warn("Deprecated window.sessionId has been replaced with SD.sessionId.")
console.trace() console.trace()
SD.sessionId = val SD.sessionId = val
} },
} },
}) })
})() })()

58
ui/media/js/image-editor.js
View File

@ -8,15 +8,15 @@ const IMAGE_EDITOR_BUTTONS = [
icon: "fa-regular fa-circle-xmark", icon: "fa-regular fa-circle-xmark",
handler: (editor) => { handler: (editor) => {
editor.hide() editor.hide()
} },
}, },
{ {
name: "Save", name: "Save",
icon: "fa-solid fa-floppy-disk", icon: "fa-solid fa-floppy-disk",
handler: (editor) => { handler: (editor) => {
editor.saveImage() editor.saveImage()
} },
} },
] ]
const defaultToolBegin = (editor, ctx, x, y, is_overlay = false) => { const defaultToolBegin = (editor, ctx, x, y, is_overlay = false) => {
@ -46,7 +46,7 @@ const IMAGE_EDITOR_TOOLS = [
cursor: "url(/media/images/fa-pencil.svg) 0 24, pointer", cursor: "url(/media/images/fa-pencil.svg) 0 24, pointer",
begin: defaultToolBegin, begin: defaultToolBegin,
move: defaultToolMove, move: defaultToolMove,
end: defaultToolEnd end: defaultToolEnd,
}, },
{ {
id: "erase", id: "erase",
@ -76,7 +76,7 @@ const IMAGE_EDITOR_TOOLS = [
}, },
setBrush: (editor, layer) => { setBrush: (editor, layer) => {
layer.ctx.globalCompositeOperation = "destination-out" layer.ctx.globalCompositeOperation = "destination-out"
} },
}, },
{ {
id: "fill", id: "fill",
@ -91,7 +91,7 @@ const IMAGE_EDITOR_TOOLS = [
} }
}, },
move: toolDoNothing, move: toolDoNothing,
end: toolDoNothing end: toolDoNothing,
}, },
{ {
id: "colorpicker", id: "colorpicker",
@ -106,14 +106,14 @@ const IMAGE_EDITOR_TOOLS = [
editor.custom_color_input.value = rgbToHex({ editor.custom_color_input.value = rgbToHex({
r: drawn_rgb[0] * drawn_opacity + img_rgb[0] * (1 - drawn_opacity), r: drawn_rgb[0] * drawn_opacity + img_rgb[0] * (1 - drawn_opacity),
g: drawn_rgb[1] * drawn_opacity + img_rgb[1] * (1 - drawn_opacity), g: drawn_rgb[1] * drawn_opacity + img_rgb[1] * (1 - drawn_opacity),
b: drawn_rgb[2] * drawn_opacity + img_rgb[2] * (1 - drawn_opacity) b: drawn_rgb[2] * drawn_opacity + img_rgb[2] * (1 - drawn_opacity),
}) })
editor.custom_color_input.dispatchEvent(new Event("change")) editor.custom_color_input.dispatchEvent(new Event("change"))
} }
}, },
move: toolDoNothing, move: toolDoNothing,
end: toolDoNothing end: toolDoNothing,
} },
] ]
const IMAGE_EDITOR_ACTIONS = [ const IMAGE_EDITOR_ACTIONS = [
@ -151,7 +151,7 @@ const IMAGE_EDITOR_ACTIONS = [
el.click() el.click()
}, },
trackHistory: true trackHistory: true,
}, },
{ {
id: "fill_all", id: "fill_all",
@ -163,7 +163,7 @@ const IMAGE_EDITOR_ACTIONS = [
editor.ctx_current.fill() editor.ctx_current.fill()
editor.setBrush() editor.setBrush()
}, },
trackHistory: true trackHistory: true,
}, },
{ {
id: "clear", id: "clear",
@ -173,7 +173,7 @@ const IMAGE_EDITOR_ACTIONS = [
editor.ctx_current.clearRect(0, 0, editor.width, editor.height) editor.ctx_current.clearRect(0, 0, editor.width, editor.height)
imageEditor.setImage(null, editor.width, editor.height) // properly reset the drawing canvas imageEditor.setImage(null, editor.width, editor.height) // properly reset the drawing canvas
}, },
trackHistory: true trackHistory: true,
}, },
{ {
id: "undo", id: "undo",
@ -182,7 +182,7 @@ const IMAGE_EDITOR_ACTIONS = [
handler: (editor) => { handler: (editor) => {
editor.history.undo() editor.history.undo()
}, },
trackHistory: false trackHistory: false,
}, },
{ {
id: "redo", id: "redo",
@ -191,8 +191,8 @@ const IMAGE_EDITOR_ACTIONS = [
handler: (editor) => { handler: (editor) => {
editor.history.redo() editor.history.redo()
}, },
trackHistory: false trackHistory: false,
} },
] ]
var IMAGE_EDITOR_SECTIONS = [ var IMAGE_EDITOR_SECTIONS = [
@ -210,7 +210,7 @@ var IMAGE_EDITOR_SECTIONS = [
sub_element.appendChild(icon) sub_element.appendChild(icon)
sub_element.append(tool_info.name) sub_element.append(tool_info.name)
element.appendChild(sub_element) element.appendChild(sub_element)
} },
}, },
{ {
name: "color", name: "color",
@ -257,7 +257,7 @@ var IMAGE_EDITOR_SECTIONS = [
"#c0c0c0", "#c0c0c0",
"#838383", "#838383",
"#525252", "#525252",
"#000000" "#000000",
], ],
initElement: (element, option) => { initElement: (element, option) => {
if (option == "custom") { if (option == "custom") {
@ -277,7 +277,7 @@ var IMAGE_EDITOR_SECTIONS = [
getCustom: (editor) => { getCustom: (editor) => {
var input = editor.popup.querySelector(".image_editor_color input") var input = editor.popup.querySelector(".image_editor_color input")
return input.value return input.value
} },
}, },
{ {
name: "brush_size", name: "brush_size",
@ -290,7 +290,7 @@ var IMAGE_EDITOR_SECTIONS = [
element.style.height = option + "px" element.style.height = option + "px"
element.style["margin-right"] = "2px" element.style["margin-right"] = "2px"
element.style["border-radius"] = (option / 2).toFixed() + "px" element.style["border-radius"] = (option / 2).toFixed() + "px"
} },
}, },
{ {
name: "opacity", name: "opacity",
@ -299,7 +299,7 @@ var IMAGE_EDITOR_SECTIONS = [
options: [0, 0.2, 0.4, 0.6, 0.8], options: [0, 0.2, 0.4, 0.6, 0.8],
initElement: (element, option) => { initElement: (element, option) => {
element.style.background = `repeating-conic-gradient(rgba(0, 0, 0, ${option}) 0% 25%, rgba(255, 255, 255, ${option}) 0% 50%) 50% / 10px 10px` element.style.background = `repeating-conic-gradient(rgba(0, 0, 0, ${option}) 0% 25%, rgba(255, 255, 255, ${option}) 0% 50%) 50% / 10px 10px`
} },
}, },
{ {
name: "sharpness", name: "sharpness",
@ -317,8 +317,8 @@ var IMAGE_EDITOR_SECTIONS = [
sub_element.style["border-radius"] = `${size}px` sub_element.style["border-radius"] = `${size}px`
element.style.background = "none" element.style.background = "none"
element.appendChild(sub_element) element.appendChild(sub_element)
} },
} },
] ]
class EditorHistory { class EditorHistory {
@ -343,7 +343,7 @@ class EditorHistory {
pushAction(action) { pushAction(action) {
this.push({ this.push({
type: "action", type: "action",
id: action id: action,
}) })
} }
editBegin(x, y) { editBegin(x, y) {
@ -351,7 +351,7 @@ class EditorHistory {
type: "edit", type: "edit",
id: this.editor.getOptionValue("tool"), id: this.editor.getOptionValue("tool"),
options: Object.assign({}, this.editor.options), options: Object.assign({}, this.editor.options),
points: [{ x: x, y: y }] points: [{ x: x, y: y }],
} }
} }
editMove(x, y) { editMove(x, y) {
@ -441,7 +441,7 @@ class ImageEditor {
this.layers[name] = { this.layers[name] = {
name: name, name: name,
canvas: canvas, canvas: canvas,
ctx: canvas.getContext("2d") ctx: canvas.getContext("2d"),
} }
}) })
@ -739,7 +739,7 @@ class ImageEditor {
touchstart: "mousedown", touchstart: "mousedown",
touchmove: "mousemove", touchmove: "mousemove",
touchend: "mouseup", touchend: "mouseup",
touchcancel: "mouseup" touchcancel: "mouseup",
} }
if (type in touchmap) { if (type in touchmap) {
type = touchmap[type] type = touchmap[type]
@ -824,7 +824,7 @@ function hexToRgb(hex) {
? { ? {
r: parseInt(result[1], 16), r: parseInt(result[1], 16),
g: parseInt(result[2], 16), g: parseInt(result[2], 16),
b: parseInt(result[3], 16) b: parseInt(result[3], 16),
} }
: null : null
} }
@ -842,14 +842,14 @@ function flood_fill(editor, the_canvas_context, x, y, color) {
r: pixels.data[linear_cords], r: pixels.data[linear_cords],
g: pixels.data[linear_cords + 1], g: pixels.data[linear_cords + 1],
b: pixels.data[linear_cords + 2], b: pixels.data[linear_cords + 2],
a: pixels.data[linear_cords + 3] a: pixels.data[linear_cords + 3],
} }
var opacity = color.a / 255 var opacity = color.a / 255
var new_color = { var new_color = {
r: parseInt(color.r * opacity + original_color.r * (1 - opacity)), r: parseInt(color.r * opacity + original_color.r * (1 - opacity)),
g: parseInt(color.g * opacity + original_color.g * (1 - opacity)), g: parseInt(color.g * opacity + original_color.g * (1 - opacity)),
b: parseInt(color.b * opacity + original_color.b * (1 - opacity)) b: parseInt(color.b * opacity + original_color.b * (1 - opacity)),
} }
if ( if (

2
ui/media/js/image-modal.js
View File

@ -65,7 +65,7 @@ const imageModal = (function() {
const state = { const state = {
previous: undefined, previous: undefined,
next: undefined next: undefined,
} }
const clear = () => { const clear = () => {

6
ui/media/js/image-modifiers.js
View File

@ -106,7 +106,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
name: modifierName, name: modifierName,
element: modifierCard.cloneNode(true), element: modifierCard.cloneNode(true),
originElement: modifierCard, originElement: modifierCard,
previews: modifierPreviews previews: modifierPreviews,
}) })
toggleCardState(trimmedName, true) toggleCardState(trimmedName, true)
} }
@ -198,7 +198,7 @@ function refreshModifiersState(newTags, inactiveTags) {
activeTags.push({ activeTags.push({
name: tag, name: tag,
element: imageModifierCard, element: imageModifierCard,
originElement: modifierCard originElement: modifierCard,
}) })
} }
modifierCard.classList.add(activeCardClass) modifierCard.classList.add(activeCardClass)
@ -224,7 +224,7 @@ function refreshModifiersState(newTags, inactiveTags) {
activeTags.push({ activeTags.push({
name: tag, name: tag,
element: modifierCard, element: modifierCard,
originElement: undefined // no origin element for missing tags originElement: undefined, // no origin element for missing tags
}) })
} }
}) })

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

@ -15,34 +15,34 @@ const taskConfigSetup = {
use_stable_diffusion_model: "Model", use_stable_diffusion_model: "Model",
use_vae_model: { use_vae_model: {
label: "VAE", label: "VAE",
visible: ({ reqBody }) => reqBody?.use_vae_model !== undefined && reqBody?.use_vae_model.trim() !== "" visible: ({ reqBody }) => reqBody?.use_vae_model !== undefined && reqBody?.use_vae_model.trim() !== "",
}, },
negative_prompt: { negative_prompt: {
label: "Negative Prompt", label: "Negative Prompt",
visible: ({ reqBody }) => reqBody?.negative_prompt !== undefined && reqBody?.negative_prompt.trim() !== "" visible: ({ reqBody }) => reqBody?.negative_prompt !== undefined && reqBody?.negative_prompt.trim() !== "",
}, },
prompt_strength: "Prompt Strength", prompt_strength: "Prompt Strength",
use_face_correction: "Fix Faces", use_face_correction: "Fix Faces",
upscale: { upscale: {
value: ({ reqBody }) => `${reqBody?.use_upscale} (${reqBody?.upscale_amount || 4}x)`, value: ({ reqBody }) => `${reqBody?.use_upscale} (${reqBody?.upscale_amount || 4}x)`,
label: "Upscale", label: "Upscale",
visible: ({ reqBody }) => !!reqBody?.use_upscale visible: ({ reqBody }) => !!reqBody?.use_upscale,
}, },
use_hypernetwork_model: "Hypernetwork", use_hypernetwork_model: "Hypernetwork",
hypernetwork_strength: { hypernetwork_strength: {
label: "Hypernetwork Strength", label: "Hypernetwork Strength",
visible: ({ reqBody }) => !!reqBody?.use_hypernetwork_model visible: ({ reqBody }) => !!reqBody?.use_hypernetwork_model,
}, },
use_lora_model: { label: "Lora Model", visible: ({ reqBody }) => !!reqBody?.use_lora_model }, use_lora_model: { label: "Lora Model", visible: ({ reqBody }) => !!reqBody?.use_lora_model },
lora_alpha: { label: "Lora Strength", visible: ({ reqBody }) => !!reqBody?.use_lora_model }, lora_alpha: { label: "Lora Strength", visible: ({ reqBody }) => !!reqBody?.use_lora_model },
preserve_init_image_color_profile: "Preserve Color Profile" preserve_init_image_color_profile: "Preserve Color Profile",
}, },
pluginTaskConfig: {}, pluginTaskConfig: {},
getCSSKey: (key) => getCSSKey: (key) =>
key key
.split("_") .split("_")
.map((s) => s.charAt(0).toUpperCase() + s.slice(1)) .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
.join("") .join(""),
} }
let imageCounter = 0 let imageCounter = 0
@ -263,8 +263,8 @@ function shiftOrConfirm(e, prompt, fn) {
yes: () => { yes: () => {
fn(e) fn(e)
}, },
cancel: () => {} cancel: () => {},
} },
}) })
} }
} }
@ -309,7 +309,7 @@ function undoableRemove(element, doubleUndo = false) {
parent: element.parentNode, parent: element.parentNode,
prev: element.previousSibling, prev: element.previousSibling,
next: element.nextSibling, next: element.nextSibling,
doubleUndo: doubleUndo doubleUndo: doubleUndo,
} }
undoBuffer.push(data) undoBuffer.push(data)
if (undoBuffer.length > UNDO_LIMIT) { if (undoBuffer.length > UNDO_LIMIT) {
@ -448,7 +448,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
return { return {
src: img.src, src: img.src,
previous: previousImg ? () => imageModalParameter(previousImg) : undefined, previous: previousImg ? () => imageModalParameter(previousImg) : undefined,
next: nextImg ? () => imageModalParameter(nextImg) : undefined next: nextImg ? () => imageModalParameter(nextImg) : undefined,
} }
} }
@ -456,7 +456,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
}) })
const req = Object.assign({}, reqBody, { const req = Object.assign({}, reqBody, {
seed: result?.seed || reqBody.seed seed: result?.seed || reqBody.seed,
}) })
imageElem.setAttribute("data-seed", req.seed) imageElem.setAttribute("data-seed", req.seed)
imageElem.setAttribute("data-imagecounter", ++imageCounter) imageElem.setAttribute("data-imagecounter", ++imageCounter)
@ -470,20 +470,20 @@ function showImages(reqBody, res, outputContainer, livePreview) {
{ {
html: '<i class="fa-solid fa-download"></i> Download Image', html: '<i class="fa-solid fa-download"></i> Download Image',
on_click: onDownloadImageClick, on_click: onDownloadImageClick,
class: "download-img" class: "download-img",
}, },
{ {
html: '<i class="fa-solid fa-download"></i> JSON', html: '<i class="fa-solid fa-download"></i> JSON',
on_click: onDownloadJSONClick, on_click: onDownloadJSONClick,
class: "download-json" class: "download-json",
} },
], ],
{ text: "Make Similar Images", on_click: onMakeSimilarClick }, { text: "Make Similar Images", on_click: onMakeSimilarClick },
{ text: "Draw another 25 steps", on_click: onContinueDrawingClick }, { text: "Draw another 25 steps", on_click: onContinueDrawingClick },
[ [
{ text: "Upscale", on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale }, { text: "Upscale", on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
{ text: "Fix Faces", on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction } { text: "Fix Faces", on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction },
] ],
] ]
// include the plugins // include the plugins
@ -583,7 +583,7 @@ function modifyCurrentRequest(...reqDiff) {
const newTaskRequest = getCurrentUserRequest() const newTaskRequest = getCurrentUserRequest()
newTaskRequest.reqBody = Object.assign(newTaskRequest.reqBody, ...reqDiff, { newTaskRequest.reqBody = Object.assign(newTaskRequest.reqBody, ...reqDiff, {
use_cpu: useCPUField.checked use_cpu: useCPUField.checked,
}) })
newTaskRequest.seed = newTaskRequest.reqBody.seed newTaskRequest.seed = newTaskRequest.reqBody.seed
@ -597,7 +597,7 @@ function onMakeSimilarClick(req, img) {
guidance_scale: 7.5, guidance_scale: 7.5,
prompt_strength: 0.7, prompt_strength: 0.7,
init_image: img.src, init_image: img.src,
seed: Math.floor(Math.random() * 10000000) seed: Math.floor(Math.random() * 10000000),
}) })
newTaskRequest.numOutputsTotal = 5 newTaskRequest.numOutputsTotal = 5
@ -613,7 +613,7 @@ function enqueueImageVariationTask(req, img, reqDiff) {
const newRequestBody = { const newRequestBody = {
num_outputs: 1, // this can be user-configurable in the future num_outputs: 1, // this can be user-configurable in the future
seed: imageSeed seed: imageSeed,
} }
// If the user is editing pictures, stop modifyCurrentRequest from importing // If the user is editing pictures, stop modifyCurrentRequest from importing
@ -634,19 +634,19 @@ function enqueueImageVariationTask(req, img, reqDiff) {
function onUpscaleClick(req, img) { function onUpscaleClick(req, img) {
enqueueImageVariationTask(req, img, { enqueueImageVariationTask(req, img, {
use_upscale: upscaleModelField.value use_upscale: upscaleModelField.value,
}) })
} }
function onFixFacesClick(req, img) { function onFixFacesClick(req, img) {
enqueueImageVariationTask(req, img, { enqueueImageVariationTask(req, img, {
use_face_correction: gfpganModelField.value use_face_correction: gfpganModelField.value,
}) })
} }
function onContinueDrawingClick(req, img) { function onContinueDrawingClick(req, img) {
enqueueImageVariationTask(req, img, { enqueueImageVariationTask(req, img, {
num_inference_steps: parseInt(req.num_inference_steps) + 25 num_inference_steps: parseInt(req.num_inference_steps) + 25,
}) })
} }
@ -695,7 +695,7 @@ function makeImage() {
const taskTemplate = getCurrentUserRequest() const taskTemplate = getCurrentUserRequest()
const newTaskRequests = getPrompts().map((prompt) => const newTaskRequests = getPrompts().map((prompt) =>
Object.assign({}, taskTemplate, { Object.assign({}, taskTemplate, {
reqBody: Object.assign({ prompt: prompt }, taskTemplate.reqBody) reqBody: Object.assign({ prompt: prompt }, taskTemplate.reqBody),
}) })
) )
newTaskRequests.forEach(createTask) newTaskRequests.forEach(createTask)
@ -876,7 +876,7 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/> 1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/>
2. Try picking a lower level in the '<em>GPU Memory Usage</em>' setting (in the '<em>Settings</em>' tab).<br/> 2. Try picking a lower level in the '<em>GPU Memory Usage</em>' setting (in the '<em>Settings</em>' tab).<br/>
3. Try generating a smaller image.<br/>` 3. Try generating a smaller image.<br/>`
} else if (msg.toLowerCase().includes('DefaultCPUAllocator: not enough memory')) { } else if (msg.toLowerCase().includes("DefaultCPUAllocator: not enough memory")) {
msg += `<br/><br/> msg += `<br/><br/>
Reason: Your computer is running out of system RAM! Reason: Your computer is running out of system RAM!
<br/> <br/>
@ -1232,8 +1232,8 @@ function getCurrentUserRequest() {
metadata_output_format: metadataOutputFormatField.value, metadata_output_format: metadataOutputFormatField.value,
original_prompt: promptField.value, original_prompt: promptField.value,
active_tags: activeTags.map((x) => x.name), active_tags: activeTags.map((x) => x.name),
inactive_tags: activeTags.filter((tag) => tag.inactive === true).map((x) => x.name) inactive_tags: activeTags.filter((tag) => tag.inactive === true).map((x) => x.name),
} },
} }
if (IMAGE_REGEX.test(initImagePreview.src)) { if (IMAGE_REGEX.test(initImagePreview.src)) {
newTask.reqBody.init_image = initImagePreview.src newTask.reqBody.init_image = initImagePreview.src
@ -1870,7 +1870,7 @@ function linkTabContents(tab) {
tabElements.push({ tabElements.push({
name: name, name: name,
tab: tab, tab: tab,
content: content content: content,
}) })
tab.addEventListener("click", (event) => selectTab(tab.id)) tab.addEventListener("click", (event) => selectTab(tab.id))

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

@ -8,7 +8,7 @@ var ParameterType = {
select: "select", select: "select",
select_multiple: "select_multiple", select_multiple: "select_multiple",
slider: "slider", slider: "slider",
custom: "custom" custom: "custom",
} }
/** /**
@ -36,10 +36,10 @@ var PARAMETERS = [
// Note: options expanded dynamically // Note: options expanded dynamically
{ {
value: "theme-default", value: "theme-default",
label: "Default" label: "Default",
} },
], ],
icon: "fa-palette" icon: "fa-palette",
}, },
{ {
id: "save_to_disk", id: "save_to_disk",
@ -47,7 +47,7 @@ var PARAMETERS = [
label: "Auto-Save Images", label: "Auto-Save Images",
note: "automatically saves images to the specified location", note: "automatically saves images to the specified location",
icon: "fa-download", icon: "fa-download",
default: false default: false,
}, },
{ {
id: "diskPath", id: "diskPath",
@ -55,7 +55,7 @@ var PARAMETERS = [
label: "Save Location", label: "Save Location",
render: (parameter) => { render: (parameter) => {
return `<input id="${parameter.id}" name="${parameter.id}" size="30" disabled>` return `<input id="${parameter.id}" name="${parameter.id}" size="30" disabled>`
} },
}, },
{ {
id: "metadata_output_format", id: "metadata_output_format",
@ -66,29 +66,29 @@ var PARAMETERS = [
options: [ options: [
{ {
value: "none", value: "none",
label: "none" label: "none",
}, },
{ {
value: "txt", value: "txt",
label: "txt" label: "txt",
}, },
{ {
value: "json", value: "json",
label: "json" label: "json",
}, },
{ {
value: "embed", value: "embed",
label: "embed" label: "embed",
}, },
{ {
value: "embed,txt", value: "embed,txt",
label: "embed & txt" label: "embed & txt",
}, },
{ {
value: "embed,json", value: "embed,json",
label: "embed & json" label: "embed & json",
} },
] ],
}, },
{ {
id: "block_nsfw", id: "block_nsfw",
@ -96,7 +96,7 @@ var PARAMETERS = [
label: "Block NSFW images", label: "Block NSFW images",
note: "blurs out NSFW images", note: "blurs out NSFW images",
icon: "fa-land-mine-on", icon: "fa-land-mine-on",
default: false default: false,
}, },
{ {
id: "sound_toggle", id: "sound_toggle",
@ -104,7 +104,7 @@ var PARAMETERS = [
label: "Enable Sound", label: "Enable Sound",
note: "plays a sound on task completion", note: "plays a sound on task completion",
icon: "fa-volume-low", icon: "fa-volume-low",
default: true default: true,
}, },
{ {
id: "process_order_toggle", id: "process_order_toggle",
@ -112,7 +112,7 @@ var PARAMETERS = [
label: "Process newest jobs first", label: "Process newest jobs first",
note: "reverse the normal processing order", note: "reverse the normal processing order",
icon: "fa-arrow-down-short-wide", icon: "fa-arrow-down-short-wide",
default: false default: false,
}, },
{ {
id: "ui_open_browser_on_start", id: "ui_open_browser_on_start",
@ -121,7 +121,7 @@ var PARAMETERS = [
note: "starts the default browser on startup", note: "starts the default browser on startup",
icon: "fa-window-restore", icon: "fa-window-restore",
default: true, default: true,
saveInAppConfig: true saveInAppConfig: true,
}, },
{ {
id: "vram_usage_level", id: "vram_usage_level",
@ -137,8 +137,8 @@ var PARAMETERS = [
options: [ options: [
{ value: "balanced", label: "Balanced" }, { value: "balanced", label: "Balanced" },
{ value: "high", label: "High" }, { value: "high", label: "High" },
{ value: "low", label: "Low" } { value: "low", label: "Low" },
] ],
}, },
{ {
id: "use_cpu", id: "use_cpu",
@ -146,20 +146,20 @@ var PARAMETERS = [
label: "Use CPU (not GPU)", label: "Use CPU (not GPU)",
note: "warning: this will be *very* slow", note: "warning: this will be *very* slow",
icon: "fa-microchip", icon: "fa-microchip",
default: false default: false,
}, },
{ {
id: "auto_pick_gpus", id: "auto_pick_gpus",
type: ParameterType.checkbox, type: ParameterType.checkbox,
label: "Automatically pick the GPUs (experimental)", label: "Automatically pick the GPUs (experimental)",
default: false default: false,
}, },
{ {
id: "use_gpus", id: "use_gpus",
type: ParameterType.select_multiple, type: ParameterType.select_multiple,
label: "GPUs to use (experimental)", label: "GPUs to use (experimental)",
note: "to process in parallel", note: "to process in parallel",
default: false default: false,
}, },
{ {
id: "auto_save_settings", id: "auto_save_settings",
@ -167,7 +167,7 @@ var PARAMETERS = [
label: "Auto-Save Settings", label: "Auto-Save Settings",
note: "restores settings on browser load", note: "restores settings on browser load",
icon: "fa-gear", icon: "fa-gear",
default: true default: true,
}, },
{ {
id: "confirm_dangerous_actions", id: "confirm_dangerous_actions",
@ -176,7 +176,7 @@ var PARAMETERS = [
note: 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", "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", icon: "fa-check-double",
default: true default: true,
}, },
{ {
id: "listen_to_network", id: "listen_to_network",
@ -185,7 +185,7 @@ var PARAMETERS = [
note: "Other devices on your network can access this web page", note: "Other devices on your network can access this web page",
icon: "fa-network-wired", icon: "fa-network-wired",
default: true, default: true,
saveInAppConfig: true saveInAppConfig: true,
}, },
{ {
id: "listen_port", id: "listen_port",
@ -196,7 +196,7 @@ var PARAMETERS = [
render: (parameter) => { render: (parameter) => {
return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">` return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`
}, },
saveInAppConfig: true saveInAppConfig: true,
}, },
{ {
id: "use_beta_channel", id: "use_beta_channel",
@ -205,7 +205,7 @@ var PARAMETERS = [
note: note:
"Get the latest features immediately (but could be less stable). Please restart the program after changing this.", "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
icon: "fa-fire", icon: "fa-fire",
default: false default: false,
}, },
{ {
id: "test_diffusers", id: "test_diffusers",
@ -215,8 +215,8 @@ var PARAMETERS = [
"<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.", "<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", icon: "fa-bolt",
default: false, default: false,
saveInAppConfig: true saveInAppConfig: true,
} },
] ]
function getParameterSettingsEntry(id) { function getParameterSettingsEntry(id) {
@ -309,7 +309,7 @@ function initParameters(parameters) {
[ [
createElement("div", undefined, undefined, icon), createElement("div", undefined, undefined, icon),
createElement("div", undefined, undefined, [labelElement, ...noteElements]), createElement("div", undefined, undefined, [labelElement, ...noteElements]),
elementWrapper elementWrapper,
] ]
) )
parametersTable.appendChild(newrow) parametersTable.appendChild(newrow)
@ -353,9 +353,9 @@ async function changeAppConfig(configDelta) {
let res = await fetch("/app_config", { let res = await fetch("/app_config", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(configDelta) body: JSON.stringify(configDelta),
}) })
res = await res.json() res = await res.json()
@ -607,7 +607,7 @@ saveSettingsBtn.addEventListener("click", function() {
const updateAppConfigRequest = { const updateAppConfigRequest = {
render_devices: getCurrentRenderDeviceSelection(), render_devices: getCurrentRenderDeviceSelection(),
update_branch: updateBranch update_branch: updateBranch,
} }
Array.from(parametersTable.children).forEach((parameterRow) => { Array.from(parametersTable.children).forEach((parameterRow) => {

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

@ -38,7 +38,7 @@ const PLUGINS = {
function webp() { function webp() {
return (reqBody) => new SD.RenderTask(reqBody) return (reqBody) => new SD.RenderTask(reqBody)
} }
) ),
} }
PLUGINS.OUTPUTS_FORMATS.register = function(...args) { PLUGINS.OUTPUTS_FORMATS.register = function(...args) {
const service = ServiceContainer.prototype.register.apply(this, args) const service = ServiceContainer.prototype.register.apply(this, args)

6
ui/media/js/searchable-models.js
View File

@ -483,7 +483,7 @@ class ModelDropdown {
createElement("i", { id: `${this.modelFilter.id}-model-filter-arrow` }, [ createElement("i", { id: `${this.modelFilter.id}-model-filter-arrow` }, [
"model-selector-arrow", "model-selector-arrow",
"fa-solid", "fa-solid",
"fa-angle-down" "fa-angle-down",
]) ])
) )
this.modelFilter.classList.add("model-selector") this.modelFilter.classList.add("model-selector")
@ -547,7 +547,7 @@ class ModelDropdown {
model, model,
createElement("li", { "data-path": fullPath }, classes, [ createElement("li", { "data-path": fullPath }, classes, [
createElement("i", undefined, ["fa-regular", "fa-file", "icon"]), createElement("i", undefined, ["fa-regular", "fa-file", "icon"]),
model model,
]) ])
) )
} }
@ -596,7 +596,7 @@ class ModelDropdown {
if (modelTree.length > 0) { if (modelTree.length > 0) {
const containerListItem = createElement("li", { id: `${this.modelFilter.id}-model-result` }, [ const containerListItem = createElement("li", { id: `${this.modelFilter.id}-model-result` }, [
"model-result" "model-result",
]) ])
//console.log(containerListItem) //console.log(containerListItem)
containerListItem.appendChild(this.createModelNodeList(undefined, modelTree, true)) containerListItem.appendChild(this.createModelNodeList(undefined, modelTree, true))

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

@ -30,14 +30,14 @@ function initTheme() {
THEMES.push({ THEMES.push({
key: theme_key, key: theme_key,
name: getThemeName(theme_key), name: getThemeName(theme_key),
rule: rule rule: rule,
}) })
} }
if (selector && selector == ":root") { if (selector && selector == ":root") {
DEFAULT_THEME = { DEFAULT_THEME = {
key: "theme-default", key: "theme-default",
name: "Default", name: "Default",
rule: rule rule: rule,
} }
} }
}) })

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

@ -111,7 +111,7 @@ function tryLoadOldCollapsibles() {
const old_map = { const old_map = {
advancedPanelOpen: "editor-settings", advancedPanelOpen: "editor-settings",
modifiersPanelOpen: "editor-modifiers", modifiersPanelOpen: "editor-modifiers",
negativePromptPanelOpen: "editor-inputs-prompt" negativePromptPanelOpen: "editor-inputs-prompt",
} }
if (localStorage.getItem(Object.keys(old_map)[0])) { if (localStorage.getItem(Object.keys(old_map)[0])) {
let result = {} let result = {}
@ -195,7 +195,7 @@ function BraceExpander() {
? bracePair(tkns, iPosn + 1, n, lst) ? bracePair(tkns, iPosn + 1, n, lst)
: { : {
close: iPosn, close: iPosn,
commas: lst commas: lst,
} }
} }
@ -207,7 +207,7 @@ function BraceExpander() {
? dctSofar ? dctSofar
: { : {
fn: and, fn: and,
args: [] args: [],
}, },
head = tkns[0], head = tkns[0],
tail = head ? tkns.slice(1) : [], tail = head ? tkns.slice(1) : [],
@ -217,7 +217,7 @@ function BraceExpander() {
return andTree( return andTree(
{ {
fn: and, fn: and,
args: dctParse.args.concat(lstOR ? orTree(dctParse, lstOR[0], dctBrace.commas) : head) args: dctParse.args.concat(lstOR ? orTree(dctParse, lstOR[0], dctBrace.commas) : head),
}, },
lstOR ? lstOR[1] : tail lstOR ? lstOR[1] : tail
) )
@ -238,7 +238,7 @@ function BraceExpander() {
}) })
.map(function(ts) { .map(function(ts) {
return ts.length > 1 ? andTree(null, ts)[0] : ts[0] return ts.length > 1 ? andTree(null, ts)[0] : ts[0]
}) }),
} }
} }
@ -344,11 +344,11 @@ function PromiseSource() {
const srcPromise = new Promise((resolve, reject) => { const srcPromise = new Promise((resolve, reject) => {
Object.defineProperties(this, { Object.defineProperties(this, {
resolve: { value: resolve, writable: false }, resolve: { value: resolve, writable: false },
reject: { value: reject, writable: false } reject: { value: reject, writable: false },
}) })
}) })
Object.defineProperties(this, { Object.defineProperties(this, {
promise: { value: makeQuerablePromise(srcPromise), writable: false } promise: { value: makeQuerablePromise(srcPromise), writable: false },
}) })
} }
@ -471,20 +471,20 @@ function makeQuerablePromise(promise) {
) )
Object.defineProperties(qurPro, { Object.defineProperties(qurPro, {
isResolved: { isResolved: {
get: () => isResolved get: () => isResolved,
}, },
resolvedValue: { resolvedValue: {
get: () => resolvedValue get: () => resolvedValue,
}, },
isPending: { isPending: {
get: () => isPending get: () => isPending,
}, },
isRejected: { isRejected: {
get: () => isRejected get: () => isRejected,
}, },
rejectReason: { rejectReason: {
get: () => rejectReason get: () => rejectReason,
} },
}) })
return qurPro return qurPro
} }
@ -790,9 +790,9 @@ function createTab(request) {
createElement("i", { style: "margin-right: 0.25em" }, [ createElement("i", { style: "margin-right: 0.25em" }, [
"fa-solid", "fa-solid",
`${request.icon.startsWith("fa-") ? "" : "fa-"}${request.icon}`, `${request.icon.startsWith("fa-") ? "" : "fa-"}${request.icon}`,
"icon" "icon",
]), ]),
labelElement labelElement,
]) ])
) )
@ -831,7 +831,7 @@ function createTab(request) {
contentElement: wrapper, contentElement: wrapper,
labelElement, labelElement,
timesOpened, timesOpened,
firstOpen: timesOpened === 1 firstOpen: timesOpened === 1,
}, },
e e
) )

2
ui/plugins/ui/Autoscroll.plugin.js
View File

@ -14,7 +14,7 @@
observer.observe(document.getElementById("preview"), { observer.observe(document.getElementById("preview"), {
childList: true, childList: true,
subtree: true subtree: true,
}) })
function Autoscroll(target) { function Autoscroll(target) {

2
ui/plugins/ui/Modifiers-dnd.plugin.js
View File

@ -25,7 +25,7 @@
}) })
observer.observe(editorModifierTagsList, { observer.observe(editorModifierTagsList, {
childList: true childList: true,
}) })
let current let current

2
ui/plugins/ui/Modifiers-wheel.plugin.js
View File

@ -18,7 +18,7 @@
}) })
observer.observe(editorModifierTagsList, { observer.observe(editorModifierTagsList, {
childList: true childList: true,
}) })
function ModifierMouseWheel(target) { function ModifierMouseWheel(target) {

6
ui/plugins/ui/custom-modifiers.plugin.js
View File

@ -13,19 +13,19 @@
customModifiers = customModifiers.filter((m) => m.trim() !== "") customModifiers = customModifiers.filter((m) => m.trim() !== "")
customModifiers = customModifiers.map(function(m) { customModifiers = customModifiers.map(function(m) {
return { return {
modifier: m modifier: m,
} }
}) })
let customGroup = { let customGroup = {
category: "Custom Modifiers", category: "Custom Modifiers",
modifiers: customModifiers modifiers: customModifiers,
} }
customModifiersGroupElement = createModifierGroup(customGroup, true) customModifiersGroupElement = createModifierGroup(customGroup, true)
createCollapsibles(customModifiersGroupElement) createCollapsibles(customModifiersGroupElement)
} }
} },
}) })
})() })()

8
ui/plugins/ui/jasmine/boot1.js
View File

@ -45,7 +45,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
const queryString = new jasmine.QueryString({ const queryString = new jasmine.QueryString({
getWindowLocation: function() { getWindowLocation: function() {
return window.location return window.location
} },
}) })
const filterSpecs = !!queryString.getParam("spec") const filterSpecs = !!queryString.getParam("spec")
@ -53,7 +53,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
const config = { const config = {
stopOnSpecFailure: queryString.getParam("stopOnSpecFailure"), stopOnSpecFailure: queryString.getParam("stopOnSpecFailure"),
stopSpecOnExpectationFailure: queryString.getParam("stopSpecOnExpectationFailure"), stopSpecOnExpectationFailure: queryString.getParam("stopSpecOnExpectationFailure"),
hideDisabled: queryString.getParam("hideDisabled") hideDisabled: queryString.getParam("hideDisabled"),
} }
const random = queryString.getParam("random") const random = queryString.getParam("random")
@ -89,7 +89,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
return document.createTextNode.apply(document, arguments) return document.createTextNode.apply(document, arguments)
}, },
timer: new jasmine.Timer(), timer: new jasmine.Timer(),
filterSpecs: filterSpecs filterSpecs: filterSpecs,
}) })
/** /**
@ -104,7 +104,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
const specFilter = new jasmine.HtmlSpecFilter({ const specFilter = new jasmine.HtmlSpecFilter({
filterString: function() { filterString: function() {
return queryString.getParam("spec") return queryString.getParam("spec")
} },
}) })
config.specFilter = function(spec) { config.specFilter = function(spec) {

20
ui/plugins/ui/jasmine/jasmine-html.js
View File

@ -106,7 +106,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom("a", { createDom("a", {
className: "jasmine-title", className: "jasmine-title",
href: "http://jasmine.github.io/", href: "http://jasmine.github.io/",
target: "_blank" target: "_blank",
}), }),
createDom("span", { className: "jasmine-version" }, j$.version) createDom("span", { className: "jasmine-version" }, j$.version)
), ),
@ -163,7 +163,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom("li", { createDom("li", {
className: this.displaySpecInCorrectFormat(result), className: this.displaySpecInCorrectFormat(result),
id: "spec_" + result.id, id: "spec_" + result.id,
title: result.fullName title: result.fullName,
}) })
) )
@ -246,7 +246,7 @@ jasmineRequire.HtmlReporter = function(j$) {
"a", "a",
{ {
title: "randomized with seed " + order.seed, title: "randomized with seed " + order.seed,
href: seedHref(order.seed) href: seedHref(order.seed),
}, },
order.seed order.seed
) )
@ -428,7 +428,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom( createDom(
"li", "li",
{ {
className: "jasmine-suite-detail jasmine-" + resultNode.result.status className: "jasmine-suite-detail jasmine-" + resultNode.result.status,
}, },
createDom("a", { href: specHref(resultNode.result) }, resultNode.result.description) createDom("a", { href: specHref(resultNode.result) }, resultNode.result.description)
) )
@ -454,7 +454,7 @@ jasmineRequire.HtmlReporter = function(j$) {
"li", "li",
{ {
className: "jasmine-" + resultNode.result.status, className: "jasmine-" + resultNode.result.status,
id: "spec-" + resultNode.result.id id: "spec-" + resultNode.result.id,
}, },
createDom("a", { href: specHref(resultNode.result) }, specDescription) createDom("a", { href: specHref(resultNode.result) }, specDescription)
) )
@ -477,7 +477,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom("input", { createDom("input", {
className: "jasmine-fail-fast", className: "jasmine-fail-fast",
id: "jasmine-fail-fast", id: "jasmine-fail-fast",
type: "checkbox" type: "checkbox",
}), }),
createDom( createDom(
"label", "label",
@ -491,7 +491,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom("input", { createDom("input", {
className: "jasmine-throw", className: "jasmine-throw",
id: "jasmine-throw-failures", id: "jasmine-throw-failures",
type: "checkbox" type: "checkbox",
}), }),
createDom( createDom(
"label", "label",
@ -505,7 +505,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom("input", { createDom("input", {
className: "jasmine-random", className: "jasmine-random",
id: "jasmine-random-order", id: "jasmine-random-order",
type: "checkbox" type: "checkbox",
}), }),
createDom( createDom(
"label", "label",
@ -519,7 +519,7 @@ jasmineRequire.HtmlReporter = function(j$) {
createDom("input", { createDom("input", {
className: "jasmine-disabled", className: "jasmine-disabled",
id: "jasmine-hide-disabled", id: "jasmine-hide-disabled",
type: "checkbox" type: "checkbox",
}), }),
createDom( createDom(
"label", "label",
@ -608,7 +608,7 @@ jasmineRequire.HtmlReporter = function(j$) {
message: warning, message: warning,
stack: result.deprecationWarnings[i].stack, stack: result.deprecationWarnings[i].stack,
runnableName: result.fullName, runnableName: result.fullName,
runnableType: runnableType runnableType: runnableType,
}) })
} }
} }

369
ui/plugins/ui/jasmine/jasmine.js
View File

File diff suppressed because it is too large Load Diff

26
ui/plugins/ui/jasmineSpec.js
View File

@ -9,11 +9,11 @@ beforeEach(function() {
return { return {
compare: function(actual, expected) { compare: function(actual, expected) {
return { return {
pass: expected.includes(actual) pass: expected.includes(actual),
}
}
} }
},
} }
},
}) })
}) })
describe("stable-diffusion-ui", function() { describe("stable-diffusion-ui", function() {
@ -116,7 +116,7 @@ describe("stable-diffusion-ui", function() {
value["foo"] = "bar" value["foo"] = "bar"
} }
return { value, done } return { value, done }
} },
}) })
const gen2 = SD.Task.asGenerator({ const gen2 = SD.Task.asGenerator({
generator: gen1, generator: gen1,
@ -128,7 +128,7 @@ describe("stable-diffusion-ui", function() {
value.test = 2 * value.test value.test = 2 * value.test
} }
return { value, done } return { value, done }
} },
}) })
expect(await SD.Task.enqueue(gen2)).toEqual({ test: 32, foo: "bar" }) expect(await SD.Task.enqueue(gen2)).toEqual({ test: 32, foo: "bar" })
}) })
@ -153,7 +153,7 @@ describe("stable-diffusion-ui", function() {
expect(typeof missing).toBe("undefined") expect(typeof missing).toBe("undefined")
return { foo: "bar" } return { foo: "bar" }
}, },
dependencies: ["ctx", "missing", "one", "foo"] dependencies: ["ctx", "missing", "one", "foo"],
} }
) )
const fooObj = cont.get("foo") const fooObj = cont.get("foo")
@ -180,7 +180,7 @@ describe("stable-diffusion-ui", function() {
let res = await fetch("/render", { let res = await fetch("/render", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
prompt: "a photograph of an astronaut riding a horse", prompt: "a photograph of an astronaut riding a horse",
@ -199,8 +199,8 @@ describe("stable-diffusion-ui", function() {
show_only_filtered_image: true, show_only_filtered_image: true,
output_format: "jpeg", output_format: "jpeg",
session_id: JASMINE_SESSION_ID session_id: JASMINE_SESSION_ID,
}) }),
}) })
expect(res.ok).toBeTruthy() expect(res.ok).toBeTruthy()
const renderRequest = await res.json() const renderRequest = await res.json()
@ -283,7 +283,7 @@ describe("stable-diffusion-ui", function() {
show_only_filtered_image: false, show_only_filtered_image: false,
//"use_face_correction": 'GFPGANv1.3', //"use_face_correction": 'GFPGANv1.3',
use_upscale: "RealESRGAN_x4plus", use_upscale: "RealESRGAN_x4plus",
session_id: JASMINE_SESSION_ID session_id: JASMINE_SESSION_ID,
}, },
function(event) { function(event) {
console.log(this, event) console.log(this, event)
@ -314,7 +314,7 @@ describe("stable-diffusion-ui", function() {
height: 128, height: 128,
seed: SD.MAX_SEED_VALUE, seed: SD.MAX_SEED_VALUE,
num_inference_steps: 10, num_inference_steps: 10,
session_id: JASMINE_SESSION_ID session_id: JASMINE_SESSION_ID,
}) })
expect(renderTask.status).toBe(SD.TaskStatus.init) expect(renderTask.status).toBe(SD.TaskStatus.init)
@ -326,7 +326,7 @@ describe("stable-diffusion-ui", function() {
await renderTask.waitUntil({ await renderTask.waitUntil({
state: SD.TaskStatus.processing, state: SD.TaskStatus.processing,
callback: () => console.log("Waiting for render task to start...") callback: () => console.log("Waiting for render task to start..."),
}) })
expect(renderTask.status).toBe(SD.TaskStatus.processing) expect(renderTask.status).toBe(SD.TaskStatus.processing)
@ -362,7 +362,7 @@ describe("stable-diffusion-ui", function() {
show_only_filtered_image: false, show_only_filtered_image: false,
//"use_face_correction": 'GFPGANv1.3', //"use_face_correction": 'GFPGANv1.3',
use_upscale: "RealESRGAN_x4plus", use_upscale: "RealESRGAN_x4plus",
session_id: JASMINE_SESSION_ID session_id: JASMINE_SESSION_ID,
}) })
await renderTask.enqueue(function(event) { await renderTask.enqueue(function(event) {
console.log(this, event) console.log(this, event)

4
ui/plugins/ui/merge.plugin.js
View File

@ -424,7 +424,7 @@
let res = await fetch("/model/merge", { let res = await fetch("/model/merge", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(request) body: JSON.stringify(request),
}) })
const data = await res.json() const data = await res.json()
addLogMessage(JSON.stringify(data)) addLogMessage(JSON.stringify(data))
@ -445,6 +445,6 @@
hypernetworkModelField.innerHTML = "" hypernetworkModelField.innerHTML = ""
await getModels() await getModels()
}) })
} },
}) })
})() })()

2
ui/plugins/ui/modifiers-toggle.plugin.js
View File

@ -21,7 +21,7 @@
}) })
observer.observe(editorModifierTagsList, { observer.observe(editorModifierTagsList, {
childList: true childList: true,
}) })
function ModifierToggle() { function ModifierToggle() {

2
ui/plugins/ui/release-notes.plugin.js
View File

@ -48,6 +48,6 @@
return marked.parse(releaseNotes) return marked.parse(releaseNotes)
} }
} },
}) })
})() })()

2
ui/plugins/ui/selftest.plugin.js
View File

@ -16,7 +16,7 @@
stopSpecOnExpectationFailure: "true", stopSpecOnExpectationFailure: "true",
stopOnSpecFailure: "false", stopOnSpecFailure: "false",
random: "false", random: "false",
hideDisabled: "false" hideDisabled: "false",
} }
const optStr = Object.entries(options) const optStr = Object.entries(options)
.map(([key, val]) => `${key}=${val}`) .map(([key, val]) => `${key}=${val}`)