|
@@ -263,7 +266,13 @@
|
-
+
@@ -356,10 +365,16 @@
System Settings
-
+
+
+ Share Easy Diffusion
+
+
+
+
System Info
@@ -534,7 +549,8 @@ async function init() {
SD.init({
events: {
statusChange: setServerStatus,
- idle: onIdle
+ idle: onIdle,
+ ping: tunnelUpdate
}
})
diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css
index 80aa48d8..119a7e10 100644
--- a/ui/media/css/auto-save.css
+++ b/ui/media/css/auto-save.css
@@ -69,13 +69,15 @@
}
.parameters-table > div:first-child {
- border-radius: 12px 12px 0px 0px;
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
}
.parameters-table > div:last-child {
- border-radius: 0px 0px 12px 12px;
+ border-bottom-left-radius: 12px;
+ border-bottom-right-radius: 12px;
}
.parameters-table .fa-fire {
color: #F7630C;
-}
\ No newline at end of file
+}
diff --git a/ui/media/css/image-editor.css b/ui/media/css/image-editor.css
index ea8112e3..ba046383 100644
--- a/ui/media/css/image-editor.css
+++ b/ui/media/css/image-editor.css
@@ -96,7 +96,7 @@
.editor-controls-center {
/* background: var(--background-color2); */
- flex: 1;
+ flex: 0;
display: flex;
justify-content: center;
align-items: center;
@@ -105,6 +105,8 @@
.editor-controls-center > div {
position: relative;
background: black;
+ margin: 20pt;
+ margin-top: 40pt;
}
.editor-controls-center canvas {
@@ -164,8 +166,10 @@
margin: var(--popup-margin);
padding: var(--popup-padding);
min-height: calc(99h - (2 * var(--popup-margin)));
- max-width: none;
+ max-width: fit-content;
min-width: fit-content;
+ margin-left: auto;
+ margin-right: auto;
}
.image-editor-popup h1 {
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 8f4f49fa..9df38f9a 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1303,12 +1303,35 @@ body.wait-pause {
display:none !important;
}
-#latent_upscaler_settings {
+.sub-settings {
padding-top: 3pt;
padding-bottom: 3pt;
padding-left: 5pt;
}
+#cloudflare-address {
+ background-color: var(--background-color3);
+ padding: 6px;
+ border-radius: var(--input-border-radius);
+ border: var(--input-border-size) solid var(--input-border-color);
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ display: inline-block;
+}
+
+#copy-cloudflare-address {
+ padding: 4px 8px;
+ margin-left: 0.5em;
+}
+
+.expandedSettingRow {
+ background: var(--background-color1);
+ width: 95%;
+ border-radius: 4pt;
+ margin-top: 5pt;
+ margin-bottom: 3pt;
+}
+
/* TOAST NOTIFICATIONS */
.toast-notification {
position: fixed;
@@ -1322,7 +1345,7 @@ body.wait-pause {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
animation: slideInRight 0.5s ease forwards;
- transition: bottom 0.5s ease; // Add a transition to smoothly reposition the toasts
+ transition: bottom 0.5s ease; /* Add a transition to smoothly reposition the toasts */
}
.toast-notification-error {
diff --git a/ui/media/js/engine.js b/ui/media/js/engine.js
index e60409f1..f3ce0551 100644
--- a/ui/media/js/engine.js
+++ b/ui/media/js/engine.js
@@ -186,6 +186,7 @@
const EVENT_TASK_START = "taskStart"
const EVENT_TASK_END = "taskEnd"
const EVENT_TASK_ERROR = "task_error"
+ const EVENT_PING = "ping"
const EVENT_UNEXPECTED_RESPONSE = "unexpectedResponse"
const EVENTS_TYPES = [
EVENT_IDLE,
@@ -196,6 +197,7 @@
EVENT_TASK_START,
EVENT_TASK_END,
EVENT_TASK_ERROR,
+ EVENT_PING,
EVENT_UNEXPECTED_RESPONSE,
]
@@ -240,6 +242,7 @@
setServerStatus("error", "offline")
return false
}
+
// Set status
switch (serverState.status) {
case ServerStates.init:
@@ -261,6 +264,7 @@
break
}
serverState.time = Date.now()
+ await eventSource.fireEvent(EVENT_PING, serverState)
return true
} catch (e) {
console.error(e)
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 8628732b..b44af102 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -87,13 +87,15 @@ let promptStrengthField = document.querySelector("#prompt_strength")
let samplerField = document.querySelector("#sampler_name")
let samplerSelectionContainer = document.querySelector("#samplerSelection")
let useFaceCorrectionField = document.querySelector("#use_face_correction")
-let gfpganModelField = new ModelDropdown(document.querySelector("#gfpgan_model"), "gfpgan")
+let gfpganModelField = new ModelDropdown(document.querySelector("#gfpgan_model"), ["gfpgan", "codeformer"], "", false)
let useUpscalingField = document.querySelector("#use_upscale")
let upscaleModelField = document.querySelector("#upscale_model")
let upscaleAmountField = document.querySelector("#upscale_amount")
let latentUpscalerSettings = document.querySelector("#latent_upscaler_settings")
let latentUpscalerStepsSlider = document.querySelector("#latent_upscaler_steps_slider")
let latentUpscalerStepsField = document.querySelector("#latent_upscaler_steps")
+let codeformerFidelitySlider = document.querySelector("#codeformer_fidelity_slider")
+let codeformerFidelityField = document.querySelector("#codeformer_fidelity")
let stableDiffusionModelField = new ModelDropdown(document.querySelector("#stable_diffusion_model"), "stable-diffusion")
let clipSkipField = document.querySelector("#clip_skip")
let tilingField = document.querySelector("#tiling")
@@ -270,7 +272,9 @@ function shiftOrConfirm(e, prompt, fn) {
confirm(
' Tip: To skip this dialog, use shift-click or disable the "Confirm dangerous actions" setting in the Settings tab.',
prompt,
- () => { fn(e) }
+ () => {
+ fn(e)
+ }
)
}
}
@@ -1261,6 +1265,11 @@ function getCurrentUserRequest() {
}
if (useFaceCorrectionField.checked) {
newTask.reqBody.use_face_correction = gfpganModelField.value
+
+ if (gfpganModelField.value.includes("codeformer")) {
+ newTask.reqBody.codeformer_upscale_faces = document.querySelector("#codeformer_upscale_faces").checked
+ newTask.reqBody.codeformer_fidelity = 1 - parseFloat(codeformerFidelityField.value)
+ }
}
if (useUpscalingField.checked) {
newTask.reqBody.use_upscale = upscaleModelField.value
@@ -1574,24 +1583,43 @@ metadataOutputFormatField.disabled = !saveToDiskField.checked
gfpganModelField.disabled = !useFaceCorrectionField.checked
useFaceCorrectionField.addEventListener("change", function(e) {
gfpganModelField.disabled = !this.checked
+
+ onFixFaceModelChange()
})
+function onFixFaceModelChange() {
+ let codeformerSettings = document.querySelector("#codeformer_settings")
+ if (gfpganModelField.value === "codeformer" && !gfpganModelField.disabled) {
+ codeformerSettings.classList.remove("displayNone")
+ codeformerSettings.classList.add("expandedSettingRow")
+ } else {
+ codeformerSettings.classList.add("displayNone")
+ codeformerSettings.classList.remove("expandedSettingRow")
+ }
+}
+gfpganModelField.addEventListener("change", onFixFaceModelChange)
+onFixFaceModelChange()
+
upscaleModelField.disabled = !useUpscalingField.checked
upscaleAmountField.disabled = !useUpscalingField.checked
useUpscalingField.addEventListener("change", function(e) {
upscaleModelField.disabled = !this.checked
upscaleAmountField.disabled = !this.checked
+
+ onUpscaleModelChange()
})
function onUpscaleModelChange() {
let upscale4x = document.querySelector("#upscale_amount_4x")
- if (upscaleModelField.value === "latent_upscaler") {
+ if (upscaleModelField.value === "latent_upscaler" && !upscaleModelField.disabled) {
upscale4x.disabled = true
upscaleAmountField.value = "2"
latentUpscalerSettings.classList.remove("displayNone")
+ latentUpscalerSettings.classList.add("expandedSettingRow")
} else {
upscale4x.disabled = false
latentUpscalerSettings.classList.add("displayNone")
+ latentUpscalerSettings.classList.remove("expandedSettingRow")
}
}
upscaleModelField.addEventListener("change", onUpscaleModelChange)
@@ -1606,6 +1634,27 @@ document.onkeydown = function(e) {
}
}
+/********************* CodeFormer Fidelity **************************/
+function updateCodeformerFidelity() {
+ codeformerFidelityField.value = codeformerFidelitySlider.value / 10
+ codeformerFidelityField.dispatchEvent(new Event("change"))
+}
+
+function updateCodeformerFidelitySlider() {
+ if (codeformerFidelityField.value < 0) {
+ codeformerFidelityField.value = 0
+ } else if (codeformerFidelityField.value > 1) {
+ codeformerFidelityField.value = 1
+ }
+
+ codeformerFidelitySlider.value = codeformerFidelityField.value * 10
+ codeformerFidelitySlider.dispatchEvent(new Event("change"))
+}
+
+codeformerFidelitySlider.addEventListener("input", updateCodeformerFidelity)
+codeformerFidelityField.addEventListener("input", updateCodeformerFidelitySlider)
+updateCodeformerFidelity()
+
/********************* Latent Upscaler Steps **************************/
function updateLatentUpscalerSteps() {
latentUpscalerStepsField.value = latentUpscalerStepsSlider.value
@@ -1704,10 +1753,10 @@ function updateLoraAlpha() {
}
function updateLoraAlphaSlider() {
- if (loraAlphaField.value < 0) {
- loraAlphaField.value = 0
- } else if (loraAlphaField.value > 1) {
- loraAlphaField.value = 1
+ if (loraAlphaField.value < -2) {
+ loraAlphaField.value = -2
+ } else if (loraAlphaField.value > 2) {
+ loraAlphaField.value = 2
}
loraAlphaSlider.value = loraAlphaField.value * 100
@@ -1958,6 +2007,38 @@ resumeBtn.addEventListener("click", function() {
document.body.classList.remove("wait-pause")
})
+function tunnelUpdate(event) {
+ if ("cloudflare" in event) {
+ document.getElementById("cloudflare-off").classList.add("displayNone")
+ document.getElementById("cloudflare-on").classList.remove("displayNone")
+ cloudflareAddressField.innerHTML = event.cloudflare
+ document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Stop"
+ } else {
+ document.getElementById("cloudflare-on").classList.add("displayNone")
+ document.getElementById("cloudflare-off").classList.remove("displayNone")
+ document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Start"
+ }
+}
+
+document.getElementById("toggle-cloudflare-tunnel").addEventListener("click", async function() {
+ let command = "stop"
+ if (document.getElementById("toggle-cloudflare-tunnel").innerHTML == "Start") {
+ command = "start"
+ }
+ showToast(`Cloudflare tunnel ${command} initiated. Please wait.`)
+
+ let res = await fetch("/tunnel/cloudflare/" + command, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({}),
+ })
+ res = await res.json()
+
+ console.log(`Cloudflare tunnel ${command} result:`, res)
+})
+
/* Pause function */
document.querySelectorAll(".tab").forEach(linkTabContents)
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index 373de58d..2f915eeb 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -11,6 +11,12 @@ var ParameterType = {
custom: "custom",
}
+/**
+ * Element shortcuts
+ */
+let parametersTable = document.querySelector("#system-settings-table")
+let networkParametersTable = document.querySelector("#system-settings-network-table")
+
/**
* JSDoc style
* @typedef {object} Parameter
@@ -186,6 +192,7 @@ var PARAMETERS = [
icon: "fa-network-wired",
default: true,
saveInAppConfig: true,
+ table: networkParametersTable,
},
{
id: "listen_port",
@@ -198,6 +205,7 @@ var PARAMETERS = [
return ` `
},
saveInAppConfig: true,
+ table: networkParametersTable,
},
{
id: "use_beta_channel",
@@ -218,6 +226,21 @@ var PARAMETERS = [
default: false,
saveInAppConfig: true,
},
+ {
+ id: "cloudflare",
+ type: ParameterType.custom,
+ label: "Cloudflare tunnel",
+ note: ` Create a VPN tunnel to share your Easy Diffusion instance with your friends. This will
+ generate a web server address on the public Internet for your Easy Diffusion instance.
+ This Easy Diffusion server is available on the Internet using the
+ address:
+ Anyone knowing this address can access your server. The address of your server will change each time
+ you share a session.
+ Uses Cloudflare services.`,
+ icon: ["fa-brands", "fa-cloudflare"],
+ render: () => ' ',
+ table: networkParametersTable,
+ }
]
function getParameterSettingsEntry(id) {
@@ -266,7 +289,6 @@ function getParameterElement(parameter) {
}
}
-let parametersTable = document.querySelector("#system-settings .parameters-table")
/**
* fill in the system settings popup table
* @param {Array | undefined} parameters
@@ -293,7 +315,10 @@ function initParameters(parameters) {
noteElements.push(noteElement)
}
- const icon = parameter.icon ? [createElement("i", undefined, ["fa", parameter.icon])] : []
+ if (typeof(parameter.icon) == "string") {
+ parameter.icon = [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 })
@@ -313,7 +338,13 @@ function initParameters(parameters) {
elementWrapper,
]
)
- parametersTable.appendChild(newrow)
+
+ let p = parametersTable
+ if (parameter.table) {
+ p = parameter.table
+ }
+ p.appendChild(newrow)
+
parameter.settingsEntry = newrow
})
}
@@ -667,8 +698,25 @@ saveSettingsBtn.addEventListener("click", function() {
})
const savePromise = changeAppConfig(updateAppConfigRequest)
+ showToast("Settings saved")
saveSettingsBtn.classList.add("active")
Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove("active"))
})
+listenToNetworkField.addEventListener("change", debounce( ()=>{
+ saveSettingsBtn.click()
+}, 1000))
+
+listenPortField.addEventListener("change", debounce( ()=>{
+ saveSettingsBtn.click()
+}, 1000))
+
+let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address")
+let cloudflareAddressField = document.getElementById("cloudflare-address")
+
+copyCloudflareAddressBtn.addEventListener("click", (e) => {
+ navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
+ showToast("Copied server address to clipboard")
+})
+
document.addEventListener("system_info_update", (e) => setDeviceInfo(e.detail))
diff --git a/ui/media/js/searchable-models.js b/ui/media/js/searchable-models.js
index 9a723d15..7bdb176a 100644
--- a/ui/media/js/searchable-models.js
+++ b/ui/media/js/searchable-models.js
@@ -38,6 +38,8 @@ class ModelDropdown {
noneEntry //= ''
modelFilterInitialized //= undefined
+ sorted //= true
+
/* MIMIC A REGULAR INPUT FIELD */
get parentElement() {
return this.modelFilter.parentElement
@@ -83,21 +85,34 @@ class ModelDropdown {
/* SEARCHABLE INPUT */
- constructor(input, modelKey, noneEntry = "") {
+ constructor(input, modelKey, noneEntry = "", sorted = true) {
this.modelFilter = input
this.noneEntry = noneEntry
this.modelKey = modelKey
+ this.sorted = sorted
if (modelsOptions !== undefined) {
// reuse models from cache (only useful for plugins, which are loaded after models)
- this.inputModels = modelsOptions[this.modelKey]
+ this.inputModels = []
+ let modelKeys = Array.isArray(this.modelKey) ? this.modelKey : [this.modelKey]
+ for (let i = 0; i < modelKeys.length; i++) {
+ let key = modelKeys[i]
+ let k = Array.isArray(modelsOptions[key]) ? modelsOptions[key] : [modelsOptions[key]]
+ this.inputModels.push(...k)
+ }
this.populateModels()
}
document.addEventListener(
"refreshModels",
this.bind(function(e) {
// reload the models
- this.inputModels = modelsOptions[this.modelKey]
+ this.inputModels = []
+ let modelKeys = Array.isArray(this.modelKey) ? this.modelKey : [this.modelKey]
+ for (let i = 0; i < modelKeys.length; i++) {
+ let key = modelKeys[i]
+ let k = Array.isArray(modelsOptions[key]) ? modelsOptions[key] : [modelsOptions[key]]
+ this.inputModels.push(...k)
+ }
this.populateModels()
}, this)
)
@@ -554,11 +569,15 @@ class ModelDropdown {
})
const childFolderNames = Array.from(foldersMap.keys())
- this.sortStringArray(childFolderNames)
+ if (this.sorted) {
+ this.sortStringArray(childFolderNames)
+ }
const folderElements = childFolderNames.map((name) => foldersMap.get(name))
const modelNames = Array.from(modelsMap.keys())
- this.sortStringArray(modelNames)
+ if (this.sorted) {
+ this.sortStringArray(modelNames)
+ }
const modelElements = modelNames.map((name) => modelsMap.get(name))
if (modelElements.length && folderName) {
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index 6ddb0ae6..871ba714 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -402,12 +402,12 @@ function debounce(func, wait, immediate) {
function preventNonNumericalInput(e) {
e = e || window.event
- let charCode = typeof e.which == "undefined" ? e.keyCode : e.which
- let charStr = String.fromCharCode(charCode)
- let re = e.target.getAttribute("pattern") || "^[0-9]+$"
- re = new RegExp(re)
+ const charCode = typeof e.which == "undefined" ? e.keyCode : e.which
+ const charStr = String.fromCharCode(charCode)
+ const newInputValue = `${e.target.value}${charStr}`
+ const re = new RegExp(e.target.getAttribute("pattern") || "^[0-9]+$")
- if (!charStr.match(re)) {
+ if (!re.test(charStr) && !re.test(newInputValue)) {
e.preventDefault()
}
}
diff --git a/ui/plugins/ui/tiled-image-download.plugin.js b/ui/plugins/ui/tiled-image-download.plugin.js
new file mode 100644
index 00000000..0fe00c2e
--- /dev/null
+++ b/ui/plugins/ui/tiled-image-download.plugin.js
@@ -0,0 +1,326 @@
+;(function(){
+ "use strict";
+ const PAPERSIZE = [
+ {id: "a3p", width: 297, height: 420, unit: "mm"},
+ {id: "a3l", width: 420, height: 297, unit: "mm"},
+ {id: "a4p", width: 210, height: 297, unit: "mm"},
+ {id: "a4l", width: 297, height: 210, unit: "mm"},
+ {id: "ll", width: 279, height: 216, unit: "mm"},
+ {id: "lp", width: 216, height: 279, unit: "mm"},
+ {id: "hd", width: 1920, height: 1080, unit: "pixels"},
+ {id: "4k", width: 3840, height: 2160, unit: "pixels"},
+ ]
+
+ // ---- Register plugin
+ PLUGINS['IMAGE_INFO_BUTTONS'].push({
+ html: ' Download tiled image',
+ on_click: onDownloadTiledImage,
+ filter: (req, img) => req.tiling != "none",
+ })
+
+ var thisImage
+
+ function onDownloadTiledImage(req, img) {
+ document.getElementById("download-tiled-image-dialog").showModal()
+ thisImage = new Image()
+ thisImage.src = img.src
+ thisImage.dataset["prompt"] = img.dataset["prompt"]
+ }
+
+ // ---- Add HTML
+ document.getElementById('container').lastElementChild.insertAdjacentHTML("afterend",
+ ``)
+
+ let downloadTiledImageDialog = document.getElementById("download-tiled-image-dialog")
+ let dtim1_width = document.getElementById("dtim1-width")
+ let dtim1_height = document.getElementById("dtim1-height")
+ let dtim2_width = document.getElementById("dtim2-width")
+ let dtim2_height = document.getElementById("dtim2-height")
+ let dtim2_unit = document.getElementById("dtim2-unit")
+ let dtim2_dpi = document.getElementById("dtim2-dpi")
+ let tabTiledTilesOptions = document.getElementById("tab-image-tiles")
+ let tabTiledSizeOptions = document.getElementById("tab-image-size")
+
+ linkTabContents(tabTiledTilesOptions)
+ linkTabContents(tabTiledSizeOptions)
+
+ prettifyInputs(downloadTiledImageDialog)
+
+ // ---- Predefined image dimensions
+ PAPERSIZE.forEach( function(p) {
+ document.getElementById("dtim2-" + p.id).addEventListener("click", (e) => {
+ dtim2_unit.value = p.unit
+ dtim2_width.value = p.width
+ dtim2_height.value = p.height
+ })
+ })
+
+ // ---- Close popup
+ document.getElementById("dti-cancel").addEventListener("click", (e) => downloadTiledImageDialog.close())
+ downloadTiledImageDialog.addEventListener('click', function (event) {
+ var rect = downloadTiledImageDialog.getBoundingClientRect();
+ var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+ && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
+ if (!isInDialog) {
+ downloadTiledImageDialog.close();
+ }
+ });
+
+ // ---- Stylesheet
+ const styleSheet = document.createElement("style")
+ styleSheet.textContent = `
+ dialog {
+ background: var(--background-color2);
+ color: var(--text-color);
+ border-radius: 7px;
+ border: 1px solid var(--background-color3);
+ }
+
+ dialog::backdrop {
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+
+ button[disabled] {
+ opacity: 0.5;
+ }
+
+ .method-2-dpi {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ }
+
+ .method-2-paper button {
+ width: 10em;
+ padding: 4px;
+ margin: 4px;
+ }
+
+ .download-tiled-image .tab-content {
+ background: var(--background-color1);
+ border-radius: 3pt;
+ }
+
+ .dtim-container { display: grid;
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
+ gap: 1em 0px;
+ grid-auto-flow: row;
+ grid-template-areas:
+ "dtim-tab dtim-tab dtim-plc"
+ "dtim-ok dtim-newtab dtim-cancel";
+ }
+
+ .download-tiled-image-top {
+ justify-self: center;
+ grid-area: dtim-tab;
+ }
+
+ .download-tiled-image-placement {
+ justify-self: center;
+ grid-area: dtim-plc;
+ margin-left: 1em;
+ }
+
+ .dtim-ok {
+ justify-self: center;
+ align-self: start;
+ grid-area: dtim-ok;
+ }
+
+ .dtim-newtab {
+ justify-self: center;
+ align-self: start;
+ grid-area: dtim-newtab;
+ }
+
+ .dtim-cancel {
+ justify-self: center;
+ align-self: start;
+ grid-area: dtim-cancel;
+ }
+
+ #tab-content-image-placement img {
+ margin: 4px;
+ opacity: 0.3;
+ border: solid 2px var(--background-color1);
+ }
+
+ #tab-content-image-placement img:hover {
+ margin: 4px;
+ opacity: 1;
+ border: solid 2px var(--accent-color);
+ filter: brightness(2);
+ }
+
+ #tab-content-image-placement img.active {
+ margin: 4px;
+ opacity: 1;
+ border: solid 2px var(--background-color1);
+ }
+
+ `
+ document.head.appendChild(styleSheet)
+
+ // ---- Placement widget
+
+ function updatePlacementWidget(event) {
+ document.querySelector("#tab-content-image-placement img.active").classList.remove("active")
+ event.target.classList.add("active")
+ }
+
+ document.querySelectorAll("#tab-content-image-placement img").forEach(
+ (i) => i.addEventListener("click", updatePlacementWidget)
+ )
+
+ function getPlacement() {
+ return document.querySelector("#tab-content-image-placement img.active").id.substr(5)
+ }
+
+ // ---- Make the image
+ function downloadTiledImage(image, width, height, offsetX=0, offsetY=0, new_tab=false) {
+
+ const canvas = document.createElement('canvas')
+ canvas.width = width
+ canvas.height = height
+ const context = canvas.getContext('2d')
+
+ const w = image.width
+ const h = image.height
+
+ for (var x = offsetX; x < width; x += w) {
+ for (var y = offsetY; y < height; y += h) {
+ context.drawImage(image, x, y, w, h)
+ }
+ }
+ if (new_tab) {
+ var newTab = window.open("")
+ newTab.document.write(`${width}×${height}, "${image.dataset["prompt"]}"}) `)
+ } else {
+ const link = document.createElement('a')
+ link.href = canvas.toDataURL()
+ link.download = image.dataset["prompt"].replace(/[^a-zA-Z0-9]+/g, "-").substr(0,22)+crypto.randomUUID()+".png"
+ link.click()
+ }
+ }
+
+ function onDownloadTiledImageClick(e, newtab=false) {
+ var width, height, offsetX, offsetY
+
+ if (isTabActive(tabTiledTilesOptions)) {
+ width = thisImage.width * dtim1_width.value
+ height = thisImage.height * dtim1_height.value
+ } else {
+ if ( dtim2_unit.value == "pixels" ) {
+ width = dtim2_width.value
+ height= dtim2_height.value
+ } else if ( dtim2_unit.value == "mm" ) {
+ width = Math.floor( dtim2_width.value * dtim2_dpi.value / 25.4 )
+ height = Math.floor( dtim2_height.value * dtim2_dpi.value / 25.4 )
+ } else { // inch
+ width = Math.floor( dtim2_width.value * dtim2_dpi.value )
+ height = Math.floor( dtim2_height.value * dtim2_dpi.value )
+ }
+ }
+
+ var placement = getPlacement()
+ if (placement == "1tl") {
+ offsetX = 0
+ offsetY = 0
+ } else if (placement == "1tr") {
+ offsetX = width - thisImage.width * Math.ceil( width / thisImage.width )
+ offsetY = 0
+ } else if (placement == "1bl") {
+ offsetX = 0
+ offsetY = height - thisImage.height * Math.ceil( height / thisImage.height )
+ } else if (placement == "1br") {
+ offsetX = width - thisImage.width * Math.ceil( width / thisImage.width )
+ offsetY = height - thisImage.height * Math.ceil( height / thisImage.height )
+ } else if (placement == "4center") {
+ offsetX = width/2 - thisImage.width * Math.ceil( width/2 / thisImage.width )
+ offsetY = height/2 - thisImage.height * Math.ceil( height/2 / thisImage.height )
+ } else if (placement == "1center") {
+ offsetX = width/2 - thisImage.width/2 - thisImage.width * Math.ceil( (width/2 - thisImage.width/2) / thisImage.width )
+ offsetY = height/2 - thisImage.height/2 - thisImage.height * Math.ceil( (height/2 - thisImage.height/2) / thisImage.height )
+ }
+ downloadTiledImage(thisImage, width, height, offsetX, offsetY, newtab)
+ downloadTiledImageDialog.close()
+ }
+
+ document.getElementById("dti-ok").addEventListener("click", onDownloadTiledImageClick)
+ document.getElementById("dti-newtab").addEventListener("click", (e) => onDownloadTiledImageClick(e,true))
+
+})()
|
Easy Diffusion
- v2.5.39
+ v2.5.41