`
createCollapsibles(taskEntry)
let draghandle = taskEntry.querySelector('.drag-handle')
draghandle.addEventListener('mousedown', (e) => {
taskEntry.setAttribute('draggable', true)
})
// Add a debounce delay to allow mobile to bouble tap.
draghandle.addEventListener('mouseup', debounce((e) => {
taskEntry.setAttribute('draggable', false)
}, 2000))
draghandle.addEventListener('click', (e) => {
e.preventDefault() // Don't allow the results to be collapsed...
})
taskEntry.addEventListener('dragend', (e) => {
taskEntry.setAttribute('draggable', false);
imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {
itc.classList.remove('dropTargetBefore','dropTargetAfter');
});
imagePreview.removeEventListener("dragover", onTaskEntryDragOver );
})
taskEntry.addEventListener('dragstart', function(e) {
imagePreview.addEventListener("dragover", onTaskEntryDragOver );
e.dataTransfer.setData("text/plain", taskEntry.id);
startX = e.target.closest(".imageTaskContainer").offsetLeft;
startY = e.target.closest(".imageTaskContainer").offsetTop;
})
if (task.reqBody.init_image !== undefined) {
createInitImageHover(taskEntry)
}
task['taskStatusLabel'] = taskEntry.querySelector('.taskStatusLabel')
task['outputContainer'] = taskEntry.querySelector('.img-preview')
task['outputMsg'] = taskEntry.querySelector('.outputMsg')
task['previewPrompt'] = taskEntry.querySelector('.preview-prompt')
task['progressBar'] = taskEntry.querySelector('.progress-bar')
task['stopTask'] = taskEntry.querySelector('.stopTask')
task['stopTask'].addEventListener('click', (e) => {
e.stopPropagation()
if (task['isProcessing']) {
shiftOrConfirm(e, "Stop this task?", async function(e) {
if (task.batchesDone <= 0 || !task.isProcessing) {
removeTask(taskEntry)
}
abortTask(task)
})
} else {
removeTask(taskEntry)
}
})
task['useSettings'] = taskEntry.querySelector('.useSettings')
task['useSettings'].addEventListener('click', function(e) {
e.stopPropagation()
restoreTaskToUI(task, TASK_REQ_NO_EXPORT)
})
task.isProcessing = true
taskEntry = imagePreviewContent.insertBefore(taskEntry, previewTools.nextSibling)
htmlTaskMap.set(taskEntry, task)
task.previewPrompt.innerText = task.reqBody.prompt
if (task.previewPrompt.innerText.trim() === '') {
task.previewPrompt.innerHTML = ' ' // allows the results to be collapsed
}
return taskEntry.id
}
function getCurrentUserRequest() {
const numOutputsTotal = parseInt(numOutputsTotalField.value)
const numOutputsParallel = parseInt(numOutputsParallelField.value)
const seed = (randomSeedField.checked ? Math.floor(Math.random() * (2**32 - 1)) : parseInt(seedField.value))
const newTask = {
batchesDone: 0,
numOutputsTotal: numOutputsTotal,
batchCount: Math.ceil(numOutputsTotal / numOutputsParallel),
seed,
reqBody: {
seed,
used_random_seed: randomSeedField.checked,
negative_prompt: negativePromptField.value.trim(),
num_outputs: numOutputsParallel,
num_inference_steps: parseInt(numInferenceStepsField.value),
guidance_scale: parseFloat(guidanceScaleField.value),
width: parseInt(widthField.value),
height: parseInt(heightField.value),
// allow_nsfw: allowNSFWField.checked,
vram_usage_level: vramUsageLevelField.value,
sampler_name: samplerField.value,
//render_device: undefined, // Set device affinity. Prefer this device, but wont activate.
use_stable_diffusion_model: stableDiffusionModelField.value,
use_vae_model: vaeModelField.value,
stream_progress_updates: true,
stream_image_progress: (numOutputsTotal > 50 ? false : streamImageProgressField.checked),
show_only_filtered_image: showOnlyFilteredImageField.checked,
block_nsfw: blockNSFWField.checked,
output_format: outputFormatField.value,
output_quality: parseInt(outputQualityField.value),
output_lossless: outputLosslessField.checked,
metadata_output_format: metadataOutputFormatField.value,
original_prompt: promptField.value,
active_tags: (activeTags.map(x => x.name)),
inactive_tags: (activeTags.filter(tag => tag.inactive === true).map(x => x.name))
}
}
if (IMAGE_REGEX.test(initImagePreview.src)) {
newTask.reqBody.init_image = initImagePreview.src
newTask.reqBody.prompt_strength = parseFloat(promptStrengthField.value)
// if (IMAGE_REGEX.test(maskImagePreview.src)) {
// newTask.reqBody.mask = maskImagePreview.src
// }
if (maskSetting.checked) {
newTask.reqBody.mask = imageInpainter.getImg()
}
newTask.reqBody.preserve_init_image_color_profile = applyColorCorrectionField.checked
if (!testDiffusers.checked) {
newTask.reqBody.sampler_name = 'ddim'
}
}
if (saveToDiskField.checked && diskPathField.value.trim() !== '') {
newTask.reqBody.save_to_disk_path = diskPathField.value.trim()
}
if (useFaceCorrectionField.checked) {
newTask.reqBody.use_face_correction = gfpganModelField.value
}
if (useUpscalingField.checked) {
newTask.reqBody.use_upscale = upscaleModelField.value
newTask.reqBody.upscale_amount = upscaleAmountField.value
}
if (hypernetworkModelField.value) {
newTask.reqBody.use_hypernetwork_model = hypernetworkModelField.value
newTask.reqBody.hypernetwork_strength = parseFloat(hypernetworkStrengthField.value)
}
if (testDiffusers.checked && loraModelField.value) {
newTask.reqBody.use_lora_model = loraModelField.value
newTask.reqBody.lora_alpha = parseFloat(loraAlphaField.value)
}
return newTask
}
function getPrompts(prompts) {
if (typeof prompts === 'undefined') {
prompts = promptField.value
}
if (prompts.trim() === '' && activeTags.length === 0) {
return ['']
}
let promptsToMake = []
if (prompts.trim() !== '') {
prompts = prompts.split('\n')
prompts = prompts.map(prompt => prompt.trim())
prompts = prompts.filter(prompt => prompt !== '')
promptsToMake = applyPermuteOperator(prompts)
promptsToMake = applySetOperator(promptsToMake)
}
const newTags = activeTags.filter(tag => tag.inactive === undefined || tag.inactive === false)
if (newTags.length > 0) {
const promptTags = newTags.map(x => x.name).join(", ")
if (promptsToMake.length > 0) {
promptsToMake = promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
}
else
{
promptsToMake.push(promptTags)
}
}
promptsToMake = applyPermuteOperator(promptsToMake)
promptsToMake = applySetOperator(promptsToMake)
PLUGINS['GET_PROMPTS_HOOK'].forEach(fn => { promptsToMake = fn(promptsToMake) })
return promptsToMake
}
function applySetOperator(prompts) {
let promptsToMake = []
let braceExpander = new BraceExpander()
prompts.forEach(prompt => {
let expandedPrompts = braceExpander.expand(prompt)
promptsToMake = promptsToMake.concat(expandedPrompts)
})
return promptsToMake
}
function applyPermuteOperator(prompts) {
let promptsToMake = []
prompts.forEach(prompt => {
let promptMatrix = prompt.split('|')
prompt = promptMatrix.shift().trim()
promptsToMake.push(prompt)
promptMatrix = promptMatrix.map(p => p.trim())
promptMatrix = promptMatrix.filter(p => p !== '')
if (promptMatrix.length > 0) {
let promptPermutations = permutePrompts(prompt, promptMatrix)
promptsToMake = promptsToMake.concat(promptPermutations)
}
})
return promptsToMake
}
function permutePrompts(promptBase, promptMatrix) {
let prompts = []
let permutations = permute(promptMatrix)
permutations.forEach(perm => {
let prompt = promptBase
if (perm.length > 0) {
let promptAddition = perm.join(', ')
if (promptAddition.trim() === '') {
return
}
prompt += ', ' + promptAddition
}
prompts.push(prompt)
})
return prompts
}
// create a file name with embedded prompt and metadata
// for easier cateloging and comparison
function createFileName(prompt, seed, steps, guidance, outputFormat) {
// Most important information is the prompt
let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, '_')
underscoreName = underscoreName.substring(0, 70)
// name and the top level metadata
let fileName = `${underscoreName}_S${seed}_St${steps}_G${guidance}.${outputFormat}`
return fileName
}
async function stopAllTasks() {
getUncompletedTaskEntries().forEach((taskEntry) => {
const taskStatusLabel = taskEntry.querySelector('.taskStatusLabel')
if (taskStatusLabel) {
taskStatusLabel.style.display = 'none'
}
const task = htmlTaskMap.get(taskEntry)
if (!task) {
return
}
abortTask(task)
})
}
function updateInitialText() {
if (document.querySelector('.imageTaskContainer') === null) {
if (undoBuffer.length == 0) {
previewTools.classList.add('displayNone')
}
initialText.classList.remove('displayNone')
} else {
initialText.classList.add('displayNone')
previewTools.classList.remove('displayNone')
}
}
function removeTask(taskToRemove) {
undoableRemove(taskToRemove)
updateInitialText()
}
clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Clear all the results and tasks in this window?", async function() {
await stopAllTasks()
let taskEntries = document.querySelectorAll('.imageTaskContainer')
taskEntries.forEach(removeTask)
})})
/* Download images popup */
showDownloadPopupBtn.addEventListener("click", (e) => { saveAllImagesPopup.classList.add("active") })
saveAllZipToggle.addEventListener('change', (e) => {
if (saveAllZipToggle.checked) {
saveAllFoldersOption.classList.remove('displayNone')
} else {
saveAllFoldersOption.classList.add('displayNone')
}
})
// convert base64 to raw binary data held in a string
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1])
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length)
// create a view into the buffer
var ia = new Uint8Array(ab)
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
// write the ArrayBuffer to a blob, and you're done
return new Blob([ab], {type: mimeString})
}
function downloadAllImages() {
let i = 0
let optZIP = saveAllZipToggle.checked
let optTree = optZIP && saveAllTreeToggle.checked
let optJSON = saveAllJSONToggle.checked
let zip = new JSZip()
let folder = zip
document.querySelectorAll(".imageTaskContainer").forEach(container => {
if (optTree) {
let name = ++i + '-' + container.querySelector('.preview-prompt').textContent.replace(/[^a-zA-Z0-9]/g, '_').substring(0,25)
folder = zip.folder(name)
}
container.querySelectorAll(".imgContainer img").forEach(img => {
let imgItem = img.closest('.imgItem')
if (imgItem.style.display === 'none') {
return
}
let req = imageRequest[img.dataset['imagecounter']]
if (optZIP) {
let suffix = img.dataset['imagecounter'] + '.' + req['output_format']
folder.file(getDownloadFilename(img, suffix), dataURItoBlob(img.src))
if (optJSON) {
suffix = img.dataset['imagecounter'] + '.json'
folder.file(getDownloadFilename(img, suffix), JSON.stringify(req, null, 2))
}
} else {
setTimeout(() => {imgItem.querySelector('.download-img').click()}, i*200)
i = i+1
if (optJSON) {
setTimeout(() => {imgItem.querySelector('.download-json').click()}, i*200)
i = i+1
}
}
})
})
if (optZIP) {
let now = Date.now().toString(36).toUpperCase()
zip.generateAsync({type:"blob"}).then(function (blob) {
saveAs(blob, `EasyDiffusion-Images-${now}.zip`);
})
}
}
saveAllImagesBtn.addEventListener('click', (e) => { downloadAllImages() })
stopImageBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Stop all the tasks?", async function(e) {
await stopAllTasks()
})})
widthField.addEventListener('change', onDimensionChange)
heightField.addEventListener('change', onDimensionChange)
function renameMakeImageButton() {
let totalImages = Math.max(parseInt(numOutputsTotalField.value), parseInt(numOutputsParallelField.value)) * getPrompts().length
let imageLabel = 'Image'
if (totalImages > 1) {
imageLabel = totalImages + ' Images'
}
if (SD.activeTasks.size == 0) {
makeImageBtn.innerText = 'Make ' + imageLabel
} else {
makeImageBtn.innerText = 'Enqueue Next ' + imageLabel
}
}
numOutputsTotalField.addEventListener('change', renameMakeImageButton)
numOutputsTotalField.addEventListener('keyup', debounce(renameMakeImageButton, 300))
numOutputsParallelField.addEventListener('change', renameMakeImageButton)
numOutputsParallelField.addEventListener('keyup', debounce(renameMakeImageButton, 300))
function onDimensionChange() {
let widthValue = parseInt(widthField.value)
let heightValue = parseInt(heightField.value)
if (!initImagePreviewContainer.classList.contains("has-image")) {
imageEditor.setImage(null, widthValue, heightValue)
}
else {
imageInpainter.setImage(initImagePreview.src, widthValue, heightValue)
}
if ( widthValue < 512 && heightValue < 512 ) {
smallImageWarning.classList.remove('displayNone')
} else {
smallImageWarning.classList.add('displayNone')
}
}
diskPathField.disabled = !saveToDiskField.checked
metadataOutputFormatField.disabled = !saveToDiskField.checked
gfpganModelField.disabled = !useFaceCorrectionField.checked
useFaceCorrectionField.addEventListener('change', function(e) {
gfpganModelField.disabled = !this.checked
})
upscaleModelField.disabled = !useUpscalingField.checked
upscaleAmountField.disabled = !useUpscalingField.checked
useUpscalingField.addEventListener('change', function(e) {
upscaleModelField.disabled = !this.checked
upscaleAmountField.disabled = !this.checked
})
makeImageBtn.addEventListener('click', makeImage)
document.onkeydown = function(e) {
if (e.ctrlKey && e.code === 'Enter') {
makeImage()
e.preventDefault()
}
}
/********************* Guidance **************************/
function updateGuidanceScale() {
guidanceScaleField.value = guidanceScaleSlider.value / 10
guidanceScaleField.dispatchEvent(new Event("change"))
}
function updateGuidanceScaleSlider() {
if (guidanceScaleField.value < 0) {
guidanceScaleField.value = 0
} else if (guidanceScaleField.value > 50) {
guidanceScaleField.value = 50
}
guidanceScaleSlider.value = guidanceScaleField.value * 10
guidanceScaleSlider.dispatchEvent(new Event("change"))
}
guidanceScaleSlider.addEventListener('input', updateGuidanceScale)
guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider)
updateGuidanceScale()
/********************* Prompt Strength *******************/
function updatePromptStrength() {
promptStrengthField.value = promptStrengthSlider.value / 100
promptStrengthField.dispatchEvent(new Event("change"))
}
function updatePromptStrengthSlider() {
if (promptStrengthField.value < 0) {
promptStrengthField.value = 0
} else if (promptStrengthField.value > 0.99) {
promptStrengthField.value = 0.99
}
promptStrengthSlider.value = promptStrengthField.value * 100
promptStrengthSlider.dispatchEvent(new Event("change"))
}
promptStrengthSlider.addEventListener('input', updatePromptStrength)
promptStrengthField.addEventListener('input', updatePromptStrengthSlider)
updatePromptStrength()
/********************* Hypernetwork Strength **********************/
function updateHypernetworkStrength() {
hypernetworkStrengthField.value = hypernetworkStrengthSlider.value / 100
hypernetworkStrengthField.dispatchEvent(new Event("change"))
}
function updateHypernetworkStrengthSlider() {
if (hypernetworkStrengthField.value < 0) {
hypernetworkStrengthField.value = 0
} else if (hypernetworkStrengthField.value > 0.99) {
hypernetworkStrengthField.value = 0.99
}
hypernetworkStrengthSlider.value = hypernetworkStrengthField.value * 100
hypernetworkStrengthSlider.dispatchEvent(new Event("change"))
}
hypernetworkStrengthSlider.addEventListener('input', updateHypernetworkStrength)
hypernetworkStrengthField.addEventListener('input', updateHypernetworkStrengthSlider)
updateHypernetworkStrength()
function updateHypernetworkStrengthContainer() {
document.querySelector("#hypernetwork_strength_container").style.display = (hypernetworkModelField.value === "" ? 'none' : '')
}
hypernetworkModelField.addEventListener('change', updateHypernetworkStrengthContainer)
updateHypernetworkStrengthContainer()
/********************* LoRA alpha **********************/
function updateLoraAlpha() {
loraAlphaField.value = loraAlphaSlider.value / 100
loraAlphaField.dispatchEvent(new Event("change"))
}
function updateLoraAlphaSlider() {
if (loraAlphaField.value < 0) {
loraAlphaField.value = 0
} else if (loraAlphaField.value > 1) {
loraAlphaField.value = 1
}
loraAlphaSlider.value = loraAlphaField.value * 100
loraAlphaSlider.dispatchEvent(new Event("change"))
}
loraAlphaSlider.addEventListener('input', updateLoraAlpha)
loraAlphaField.addEventListener('input', updateLoraAlphaSlider)
updateLoraAlpha()
function updateLoraAlphaContainer() {
document.querySelector("#lora_alpha_container").style.display = (loraModelField.value === "" ? 'none' : '')
}
loraModelField.addEventListener('change', updateLoraAlphaContainer)
updateLoraAlphaContainer()
/********************* JPEG/WEBP Quality **********************/
function updateOutputQuality() {
outputQualityField.value = 0 | outputQualitySlider.value
outputQualityField.dispatchEvent(new Event("change"))
}
function updateOutputQualitySlider() {
if (outputQualityField.value < 10) {
outputQualityField.value = 10
} else if (outputQualityField.value > 95) {
outputQualityField.value = 95
}
outputQualitySlider.value = 0 | outputQualityField.value
outputQualitySlider.dispatchEvent(new Event("change"))
}
outputQualitySlider.addEventListener('input', updateOutputQuality)
outputQualityField.addEventListener('input', debounce(updateOutputQualitySlider, 1500))
updateOutputQuality()
function updateOutputQualityVisibility() {
if (outputFormatField.value === 'webp') {
outputLosslessContainer.classList.remove('displayNone')
if (outputLosslessField.checked) {
outputQualityRow.classList.add('displayNone')
} else {
outputQualityRow.classList.remove('displayNone')
}
}
else if (outputFormatField.value === 'png') {
outputQualityRow.classList.add('displayNone')
outputLosslessContainer.classList.add('displayNone')
} else {
outputQualityRow.classList.remove('displayNone')
outputLosslessContainer.classList.add('displayNone')
}
}
outputFormatField.addEventListener('change', updateOutputQualityVisibility)
outputLosslessField.addEventListener('change', updateOutputQualityVisibility)
/********************* Zoom Slider **********************/
thumbnailSizeField.addEventListener('change', () => {
(function (s) {
for (var j =0; j < document.styleSheets.length; j++) {
let cssSheet = document.styleSheets[j]
for (var i = 0; i < cssSheet.cssRules.length; i++) {
var rule = cssSheet.cssRules[i];
if (rule.selectorText == "div.img-preview img") {
rule.style['max-height'] = s+'vh';
rule.style['max-width'] = s+'vw';
return;
}
}
}
})(thumbnailSizeField.value)
})
function onAutoScrollUpdate() {
if (autoScroll.checked) {
autoscrollBtn.classList.add('pressed')
} else {
autoscrollBtn.classList.remove('pressed')
}
autoscrollBtn.querySelector(".state").innerHTML = (autoScroll.checked ? "ON" : "OFF")
}
autoscrollBtn.addEventListener('click', function() {
autoScroll.checked = !autoScroll.checked
autoScroll.dispatchEvent(new Event("change"))
onAutoScrollUpdate()
})
autoScroll.addEventListener('change', onAutoScrollUpdate)
function checkRandomSeed() {
if (randomSeedField.checked) {
seedField.disabled = true
//seedField.value = "0" // This causes the seed to be lost if the user changes their mind after toggling the checkbox
} else {
seedField.disabled = false
}
}
randomSeedField.addEventListener('input', checkRandomSeed)
checkRandomSeed()
function loadImg2ImgFromFile() {
if (initImageSelector.files.length === 0) {
return
}
let reader = new FileReader()
let file = initImageSelector.files[0]
reader.addEventListener('load', function(event) {
initImagePreview.src = reader.result
})
if (file) {
reader.readAsDataURL(file)
}
}
initImageSelector.addEventListener('change', loadImg2ImgFromFile)
loadImg2ImgFromFile()
function img2imgLoad() {
promptStrengthContainer.style.display = 'table-row'
if (!testDiffusers.checked) {
samplerSelectionContainer.style.display = "none"
}
initImagePreviewContainer.classList.add("has-image")
colorCorrectionSetting.style.display = ''
initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
imageEditor.setImage(this.src, initImagePreview.naturalWidth, initImagePreview.naturalHeight)
imageInpainter.setImage(this.src, parseInt(widthField.value), parseInt(heightField.value))
}
function img2imgUnload() {
initImageSelector.value = null
initImagePreview.src = ''
maskSetting.checked = false
promptStrengthContainer.style.display = "none"
if (!testDiffusers.checked) {
samplerSelectionContainer.style.display = ""
}
initImagePreviewContainer.classList.remove("has-image")
colorCorrectionSetting.style.display = 'none'
imageEditor.setImage(null, parseInt(widthField.value), parseInt(heightField.value))
}
initImagePreview.addEventListener('load', img2imgLoad)
initImageClearBtn.addEventListener('click', img2imgUnload)
maskSetting.addEventListener('click', function() {
onDimensionChange()
})
promptsFromFileBtn.addEventListener('click', function() {
promptsFromFileSelector.click()
})
promptsFromFileSelector.addEventListener('change', async function() {
if (promptsFromFileSelector.files.length === 0) {
return
}
let reader = new FileReader()
let file = promptsFromFileSelector.files[0]
reader.addEventListener('load', async function() {
await parseContent(reader.result)
})
if (file) {
reader.readAsText(file)
}
})
/* setup popup handlers */
document.querySelectorAll('.popup').forEach(popup => {
popup.addEventListener('click', event => {
if (event.target == popup) {
popup.classList.remove("active")
}
})
var closeButton = popup.querySelector(".close-button")
if (closeButton) {
closeButton.addEventListener('click', () => {
popup.classList.remove("active")
})
}
})
var tabElements = []
function selectTab(tab_id) {
let tabInfo = tabElements.find(t => t.tab.id == tab_id)
if (!tabInfo.tab.classList.contains("active")) {
tabElements.forEach(info => {
if (info.tab.classList.contains("active") && info.tab.parentNode === tabInfo.tab.parentNode) {
info.tab.classList.toggle("active")
info.content.classList.toggle("active")
}
})
tabInfo.tab.classList.toggle("active")
tabInfo.content.classList.toggle("active")
}
document.dispatchEvent(new CustomEvent('tabClick', { detail: tabInfo }))
}
function linkTabContents(tab) {
var name = tab.id.replace("tab-", "")
var content = document.getElementById(`tab-content-${name}`)
tabElements.push({
name: name,
tab: tab,
content: content
})
tab.addEventListener("click", event => selectTab(tab.id))
}
function isTabActive(tab) {
return tab.classList.contains("active")
}
let pauseClient = false
function resumeClient() {
if (pauseClient) {
document.body.classList.remove('wait-pause')
document.body.classList.add('pause')
}
return new Promise(resolve => {
let playbuttonclick = function () {
resumeBtn.removeEventListener("click", playbuttonclick);
resolve("resolved");
}
resumeBtn.addEventListener("click", playbuttonclick)
})
}
promptField.addEventListener("input", debounce( renameMakeImageButton, 1000) )
pauseBtn.addEventListener("click", function () {
pauseClient = true
pauseBtn.style.display="none"
resumeBtn.style.display = "inline"
document.body.classList.add('wait-pause')
})
resumeBtn.addEventListener("click", function () {
pauseClient = false
resumeBtn.style.display = "none"
pauseBtn.style.display = "inline"
document.body.classList.remove('pause')
document.body.classList.remove('wait-pause')
})
/* Pause function */
document.querySelectorAll(".tab").forEach(linkTabContents)
window.addEventListener("beforeunload", function(e) {
const msg = "Unsaved pictures will be lost!";
let elementList = document.getElementsByClassName("imageTaskContainer");
if (elementList.length != 0) {
e.preventDefault();
(e || window.event).returnValue = msg;
return msg;
} else {
return true;
}
});
createCollapsibles()
prettifyInputs(document);
// set the textbox as focused on start
promptField.focus()
promptField.selectionStart = promptField.value.length