- 
- 
+ 
+ 
+ 
-
-
-
+
+
+
Easy Diffusion
- v2.5.30
+ v2.5.41
+ The Diffusers Tech Preview allows early access to the new features based on Diffusers.
+This is under active development, and is missing a few features. It is experimental! Please report any bugs to the #beta channel in our Discord server!
+Set your custom modifiers (one per line)
Tip: You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.
+If you found this project useful and want to help keep it alive, please 
to help cover the cost of development and maintenance! Thank you for your support!
Please feel free to join the discord community or file an issue if you have any problems or suggestions in using this interface.
+Please feel free to join the discord community or file an issue if you have any problems or suggestions in using this interface.
No Image
'
+ logError(
+ "Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.",
+ event,
+ outputMsg
+ )
+ } else if (typeof event?.response === "object") {
+ let msg = "Stable Diffusion had an error reading the response:
"
if (this.exception) {
msg += `Error: ${this.exception.message}
`
}
- try { // 'Response': body stream already read
- msg += 'Read: ' + await event.response.text()
- } catch(e) {
- msg += 'Unexpected end of stream. '
+ try {
+ // 'Response': body stream already read
+ msg += "Read: " + (await event.response.text())
+ } catch (e) {
+ msg += "Unexpected end of stream. "
}
const bufferString = event.reader.bufferedString
if (bufferString) {
- msg += 'Buffered data: ' + bufferString
+ msg += "Buffered data: " + bufferString
}
- msg += ''
- logError(msg, event, outputMsg)
- } else {
- let msg = `Unexpected Read Error:
Error:${this.exception}
EventInfo: ${JSON.stringify(event, undefined, 4)}`
+ msg += ""
logError(msg, event, outputMsg)
}
break
}
}
- if ('update' in event) {
+ if ("update" in event) {
const stepUpdate = event.update
- if (!('step' in stepUpdate)) {
+ if (!("step" in stepUpdate)) {
return
}
// task.instances can be a mix of different tasks with uneven number of steps (Render Vs Filter Tasks)
- const overallStepCount = task.instances.reduce(
- (sum, instance) => sum + (instance.isPending ? Math.max(0, instance.step || stepUpdate.step) / (instance.total_steps || stepUpdate.total_steps) : 1),
- 0 // Initial value
- ) * stepUpdate.total_steps // Scale to current number of steps.
+ const overallStepCount =
+ task.instances.reduce(
+ (sum, instance) =>
+ sum +
+ (instance.isPending
+ ? Math.max(0, instance.step || stepUpdate.step) /
+ (instance.total_steps || stepUpdate.total_steps)
+ : 1),
+ 0 // Initial value
+ ) * stepUpdate.total_steps // Scale to current number of steps.
const totalSteps = task.instances.reduce(
(sum, instance) => sum + (instance.total_steps || stepUpdate.total_steps),
stepUpdate.total_steps * (batchCount - task.batchesDone) // Initial value at (unstarted task count * Nbr of steps)
@@ -711,9 +819,9 @@ function getTaskUpdater(task, reqBody, outputContainer) {
const timeTaken = stepUpdate.step_time // sec
const stepsRemaining = Math.max(0, totalSteps - overallStepCount)
- const timeRemaining = (timeTaken < 0 ? '' : millisecondsToStr(stepsRemaining * timeTaken * 1000))
+ const timeRemaining = timeTaken < 0 ? "" : millisecondsToStr(stepsRemaining * timeTaken * 1000)
outputMsg.innerHTML = `Batch ${task.batchesDone} of ${batchCount}. Generating image(s): ${percent}%. Time remaining (approx): ${timeRemaining}`
- outputMsg.style.display = 'block'
+ outputMsg.style.display = "block"
progressBarInner.style.width = `${percent}%`
if (stepUpdate.output) {
@@ -729,8 +837,8 @@ function abortTask(task) {
}
task.isProcessing = false
task.progressBar.classList.remove("active")
- task['taskStatusLabel'].style.display = 'none'
- task['stopTask'].innerHTML = ' Remove'
+ task["taskStatusLabel"].style.display = "none"
+ task["stopTask"].innerHTML = ' Remove'
if (!task.instances?.some((r) => r.isPending)) {
return
}
@@ -747,30 +855,49 @@ function onTaskErrorHandler(task, reqBody, instance, reason) {
if (!task.isProcessing) {
return
}
- console.log('Render request %o, Instance: %o, Error: %s', reqBody, instance, reason)
+ console.log("Render request %o, Instance: %o, Error: %s", reqBody, instance, reason)
abortTask(task)
- const outputMsg = task['outputMsg']
- logError('Stable Diffusion had an error. Please check the logs in the command-line window. ' + reason.stack + '', task, outputMsg) - setStatus('request', 'error', 'error') + const outputMsg = task["outputMsg"] + logError( + "Stable Diffusion had an error. Please check the logs in the command-line window.
" + + reason.stack + + "", + task, + outputMsg + ) + setStatus("request", "error", "error") } function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { - if (typeof stepUpdate === 'object') { - if (stepUpdate.status === 'succeeded') { + if (typeof stepUpdate === "object") { + if (stepUpdate.status === "succeeded") { showImages(reqBody, stepUpdate, outputContainer, false) } else { task.isProcessing = false - const outputMsg = task['outputMsg'] - let msg = '' - if ('detail' in stepUpdate && typeof stepUpdate.detail === 'string' && stepUpdate.detail.length > 0) { + const outputMsg = task["outputMsg"] + let msg = "" + if ("detail" in stepUpdate && typeof stepUpdate.detail === "string" && stepUpdate.detail.length > 0) { msg = stepUpdate.detail - if (msg.toLowerCase().includes('out of memory')) { + if (msg.toLowerCase().includes("out of memory")) { msg += `
StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}`
@@ -779,29 +906,29 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
}
}
if (task.isProcessing && task.batchesDone < task.batchCount) {
- task['taskStatusLabel'].innerText = "Pending"
- task['taskStatusLabel'].classList.add('waitingTaskLabel')
- task['taskStatusLabel'].classList.remove('activeTaskLabel')
+ task["taskStatusLabel"].innerText = "Pending"
+ task["taskStatusLabel"].classList.add("waitingTaskLabel")
+ task["taskStatusLabel"].classList.remove("activeTaskLabel")
return
}
- if ('instances' in task && task.instances.some((ins) => ins != instance && ins.isPending)) {
+ if ("instances" in task && task.instances.some((ins) => ins != instance && ins.isPending)) {
return
}
task.isProcessing = false
- task['stopTask'].innerHTML = ' Remove'
- task['taskStatusLabel'].style.display = 'none'
+ task["stopTask"].innerHTML = ' Remove'
+ task["taskStatusLabel"].style.display = "none"
- let time = millisecondsToStr( Date.now() - task.startTime )
+ let time = millisecondsToStr(Date.now() - task.startTime)
if (task.batchesDone == task.batchCount) {
- if (!task.outputMsg.innerText.toLowerCase().includes('error')) {
+ if (!task.outputMsg.innerText.toLowerCase().includes("error")) {
task.outputMsg.innerText = `Processed ${task.numOutputsTotal} images in ${time}`
}
task.progressBar.style.height = "0px"
task.progressBar.style.border = "0px solid var(--background-color3)"
task.progressBar.classList.remove("active")
- setStatus('request', 'done', 'success')
+ setStatus("request", "done", "success")
} else {
task.outputMsg.innerText += `. Task ended after ${time}`
}
@@ -818,10 +945,10 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
return
}
- if (pauseClient) {
- resumeBtn.click()
+ if (pauseClient) {
+ resumeBtn.click()
}
- renderButtons.style.display = 'none'
+ renderButtons.style.display = "none"
renameMakeImageButton()
if (isSoundEnabled()) {
@@ -829,39 +956,40 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
}
}
-
async function onTaskStart(task) {
if (!task.isProcessing || task.batchesDone >= task.batchCount) {
return
}
- if (typeof task.startTime !== 'number') {
+ if (typeof task.startTime !== "number") {
task.startTime = Date.now()
}
- if (!('instances' in task)) {
- task['instances'] = []
+ if (!("instances" in task)) {
+ task["instances"] = []
}
- task['stopTask'].innerHTML = ' Stop'
- task['taskStatusLabel'].innerText = "Starting"
- task['taskStatusLabel'].classList.add('waitingTaskLabel')
+ task["stopTask"].innerHTML = ' Stop'
+ task["taskStatusLabel"].innerText = "Starting"
+ task["taskStatusLabel"].classList.add("waitingTaskLabel")
let newTaskReqBody = task.reqBody
if (task.batchCount > 1) {
// Each output render batch needs it's own task reqBody instance to avoid altering the other runs after they are completed.
newTaskReqBody = Object.assign({}, task.reqBody)
- if (task.batchesDone == task.batchCount-1) {
+ if (task.batchesDone == task.batchCount - 1) {
// Last batch of the task
// If the number of parallel jobs is no factor of the total number of images, the last batch must create less than "parallel jobs count" images
// E.g. with numOutputsTotal = 6 and num_outputs = 5, the last batch shall only generate 1 image.
- newTaskReqBody.num_outputs = task.numOutputsTotal - task.reqBody.num_outputs * (task.batchCount-1)
+ newTaskReqBody.num_outputs = task.numOutputsTotal - task.reqBody.num_outputs * (task.batchCount - 1)
}
}
const startSeed = task.seed || newTaskReqBody.seed
- const genSeeds = Boolean(typeof newTaskReqBody.seed !== 'number' || (newTaskReqBody.seed === task.seed && task.numOutputsTotal > 1))
+ const genSeeds = Boolean(
+ typeof newTaskReqBody.seed !== "number" || (newTaskReqBody.seed === task.seed && task.numOutputsTotal > 1)
+ )
if (genSeeds) {
- newTaskReqBody.seed = parseInt(startSeed) + (task.batchesDone * task.reqBody.num_outputs)
+ newTaskReqBody.seed = parseInt(startSeed) + task.batchesDone * task.reqBody.num_outputs
}
// Update the seed *before* starting the processing so it's retained if user stops the task
@@ -869,15 +997,15 @@ async function onTaskStart(task) {
seedField.value = task.seed
}
- const outputContainer = document.createElement('div')
- outputContainer.className = 'img-batch'
+ const outputContainer = document.createElement("div")
+ outputContainer.className = "img-batch"
task.outputContainer.insertBefore(outputContainer, task.outputContainer.firstChild)
- const eventInfo = {reqBody:newTaskReqBody}
- const callbacksPromises = PLUGINS['TASK_CREATE'].map((hook) => {
- if (typeof hook !== 'function') {
- console.error('The provided TASK_CREATE hook is not a function. Hook: %o', hook)
- return Promise.reject(new Error('hook is not a function.'))
+ const eventInfo = { reqBody: newTaskReqBody }
+ const callbacksPromises = PLUGINS["TASK_CREATE"].map((hook) => {
+ if (typeof hook !== "function") {
+ console.error("The provided TASK_CREATE hook is not a function. Hook: %o", hook)
+ return Promise.reject(new Error("hook is not a function."))
}
try {
return Promise.resolve(hook.call(task, eventInfo))
@@ -894,12 +1022,16 @@ async function onTaskStart(task) {
instance = await Promise.resolve(factory(eventInfo.reqBody || newTaskReqBody))
}
if (!instance) {
- console.error(`${factory ? "Factory " + String(factory) : 'No factory defined'} for output format ${eventInfo.reqBody?.output_format || newTaskReqBody.output_format}. Instance is ${instance || 'undefined'}. Using default renderer.`)
+ console.error(
+ `${factory ? "Factory " + String(factory) : "No factory defined"} for output format ${eventInfo.reqBody
+ ?.output_format || newTaskReqBody.output_format}. Instance is ${instance ||
+ "undefined"}. Using default renderer.`
+ )
instance = new SD.RenderTask(eventInfo.reqBody || newTaskReqBody)
}
}
- task['instances'].push(instance)
+ task["instances"].push(instance)
task.batchesDone++
instance.enqueue(getTaskUpdater(task, newTaskReqBody, outputContainer)).then(
@@ -911,86 +1043,84 @@ async function onTaskStart(task) {
}
)
- setStatus('request', 'fetching..')
- renderButtons.style.display = 'flex'
+ setStatus("request", "fetching..")
+ renderButtons.style.display = "flex"
renameMakeImageButton()
updateInitialText()
}
/* Hover effect for the init image in the task list */
function createInitImageHover(taskEntry) {
- var $tooltip = $( taskEntry.querySelector('.task-fs-initimage') )
- var img = document.createElement('img')
- img.src = taskEntry.querySelector('div.task-initimg > img').src
+ var $tooltip = $(taskEntry.querySelector(".task-fs-initimage"))
+ var img = document.createElement("img")
+ img.src = taskEntry.querySelector("div.task-initimg > img").src
$tooltip.append(img)
$tooltip.append(``)
- $tooltip.find('button').on('click', (e) => {
+ $tooltip.find("button").on("click", (e) => {
e.stopPropagation()
- onUseAsInputClick(null,img)
+ onUseAsInputClick(null, img)
})
}
-let startX, startY;
+let startX, startY
function onTaskEntryDragOver(event) {
- imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {
- if(itc != event.target.closest(".imageTaskContainer")){
- itc.classList.remove('dropTargetBefore','dropTargetAfter');
+ imagePreview.querySelectorAll(".imageTaskContainer").forEach((itc) => {
+ if (itc != event.target.closest(".imageTaskContainer")) {
+ itc.classList.remove("dropTargetBefore", "dropTargetAfter")
}
- });
- if(event.target.closest(".imageTaskContainer")){
- if(startX && startY){
- if(event.target.closest(".imageTaskContainer").offsetTop > startY){
- event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter');
- }else if(event.target.closest(".imageTaskContainer").offsetTop < startY){
- event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore');
- }else if (event.target.closest(".imageTaskContainer").offsetLeft > startX){
- event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter');
- }else if (event.target.closest(".imageTaskContainer").offsetLeft < startX){
- event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore');
+ })
+ if (event.target.closest(".imageTaskContainer")) {
+ if (startX && startY) {
+ if (event.target.closest(".imageTaskContainer").offsetTop > startY) {
+ event.target.closest(".imageTaskContainer").classList.add("dropTargetAfter")
+ } else if (event.target.closest(".imageTaskContainer").offsetTop < startY) {
+ event.target.closest(".imageTaskContainer").classList.add("dropTargetBefore")
+ } else if (event.target.closest(".imageTaskContainer").offsetLeft > startX) {
+ event.target.closest(".imageTaskContainer").classList.add("dropTargetAfter")
+ } else if (event.target.closest(".imageTaskContainer").offsetLeft < startX) {
+ event.target.closest(".imageTaskContainer").classList.add("dropTargetBefore")
}
}
}
}
+function generateConfig({ label, value, visible, cssKey }) {
+ if (!visible) return null
+ return `(Plugin developers, add your plugins to plugins.json)
`) +const refreshPlugins = document.getElementById("refresh-plugins") +refreshPlugins.addEventListener("click", async function (event) { + event.preventDefault() + await initPlugins(true) +}) + +function showPluginToast(message, duration = 5000, error = false, addNotification = true) { + if (addNotification === true) { + addPluginNotification(pluginNotifications, message, error) + } + try { + showToast(message, duration, error) + } catch (error) { + console.error('Error while trying to show toast:', error); + } +} + +function matchPluginFileNames(fileName1, fileName2) { + const regex = /^(.+?)(?:-\d+(\.\d+)*)?\.plugin\.js$/; + const match1 = fileName1.match(regex); + const match2 = fileName2.match(regex); + + if (match1 && match2 && match1[1] === match2[1]) { + return true; // the two file names match + } else { + return false; // the two file names do not match + } +} + +function extractFilename(filepath) { + // Normalize the path separators to forward slashes and make the file names lowercase + const normalizedFilePath = filepath.replace(/\\/g, "/").toLowerCase(); + + // Strip off the path from the file name + const fileName = normalizedFilePath.substring(normalizedFilePath.lastIndexOf("/") + 1); + + return fileName +} + +function checkFileNameInArray(paths, filePath) { + // Strip off the path from the file name + const fileName = extractFilename(filePath); + + // Check if the file name exists in the array of paths + return paths.some(path => { + // Strip off the path from the file name + const baseName = extractFilename(path); + + // Check if the file names match and return the result as a boolean + return matchPluginFileNames(fileName, baseName); + }); +} + +function isGitHub(url) { + return url.startsWith("https://raw.githubusercontent.com/") === true +} + +/* fill in the plugins table */ +function getIncompatiblePlugins(pluginId) { + const enabledPlugins = plugins.filter(plugin => plugin.enabled && plugin.id !== pluginId); + const incompatiblePlugins = enabledPlugins.filter(plugin => plugin.compatIssueIds?.includes(pluginId)); + const pluginNames = incompatiblePlugins.map(plugin => plugin.name); + if (pluginNames.length === 0) { + return null; + } + const pluginNamesList = pluginNames.map(name => `