From d656c34bd4d00cc768ab2c22d3449e25ce00b686 Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Sun, 30 Oct 2022 23:21:39 -0400
Subject: [PATCH 01/10] Add support for drag&drop for the text files made by
 the backend and also supports JSON.

---
 ui/index.html      |   1 +
 ui/media/js/dnd.js | 311 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 312 insertions(+)
 create mode 100644 ui/media/js/dnd.js

diff --git a/ui/index.html b/ui/index.html
index 5e6a2685..fcb45f75 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -263,6 +263,7 @@
 <script src="media/js/auto-save.js?v=3"></script>
 <script src="media/js/main.js?v=7"></script>
 <script src="media/js/themes.js?v=3"></script>
+<script src="media/js/dnd.js?v=3"></script>
 <script>
 async function init() {
     await initSettings()
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
new file mode 100644
index 00000000..909f92d8
--- /dev/null
+++ b/ui/media/js/dnd.js
@@ -0,0 +1,311 @@
+"use strict" // Opt in to a restricted variant of JavaScript
+
+const TASK_MAPPING = {
+    prompt: { name: 'Prompt',
+        setUI: (prompt) => {
+            promptField.value = prompt
+        },
+        readUI: () => promptField.value,
+        parse: (val) => val
+    },
+    negative_prompt: { name: 'Negative Prompt',
+        setUI: (negative_prompt) => {
+            negativePromptField.value = negative_prompt
+        },
+        readUI: () => negativePromptField.value,
+        parse: (val) => val
+    },
+    width: { name: 'Width',
+        setUI: (width) => {
+            widthField.value = width
+        },
+        readUI: () => parseInt(widthField.value),
+        parse: (val) => parseInt(val)
+    },
+    height: { name: 'Height',
+        setUI: (height) => {
+            heightField.value = height
+        },
+        readUI: () => parseInt(heightField.value),
+        parse: (val) => parseInt(val)
+    },
+    seed: { name: 'Seed',
+        setUI: (seed) => {
+            if (!seed) {
+                randomSeedField.checked = true
+                return
+            }
+            randomSeedField.checked = false
+            seedField.value = seed
+        },
+        readUI: () => (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value)),
+        parse: (val) => parseInt(val)
+    },
+    num_inference_steps: { name: 'Steps',
+        setUI: (num_inference_steps) => {
+            numInferenceStepsField.value = num_inference_steps
+        },
+        readUI: () => parseInt(numInferenceStepsField.value),
+        parse: (val) => parseInt(val)
+    },
+    guidance_scale: { name: 'Guidance Scale',
+        setUI: (guidance_scale) => {
+            guidanceScaleField.value = guidance_scale
+        },
+        readUI: () => parseFloat(guidanceScaleField.value),
+        parse: (val) => parseFloat(val)
+    },
+    prompt_strength: { name: 'Prompt Strength',
+        setUI: (prompt_strength) => {
+            promptStrengthField.value = prompt_strength
+        },
+        readUI: () => parseFloat(promptStrengthField.value),
+        parse: (val) => parseFloat(val)
+    },
+
+    init_image:  { name: 'Initial Image',
+        setUI: (init_image) => {
+            initImagePreview.src = init_image
+        },
+        readUI: () => initImagePreview.src,
+        parse: (val) => val
+    },
+    mask:  { name: 'Mask',
+        setUI: (mask) => {
+            inpaintingEditor.setImg(mask)
+            maskSetting.checked = Boolean(mask)
+        },
+        readUI: () => (maskSetting.checked ? inpaintingEditor.getImg() : undefined),
+        parse: (val) => val
+    },
+
+    use_face_correction: { name: 'Use Face Correction',
+        setUI: (use_face_correction) => {
+            useFaceCorrectionField.checked = Boolean(use_face_correction)
+        },
+        readUI: () => useFaceCorrectionField.checked,
+        parse: (val) => val
+    },
+    use_upscale: { name: 'Use Upscaling',
+        setUI: (use_upscale) => {
+            useUpscalingField.checked = Boolean(use_upscale)
+            upscaleModelField.value = use_upscale
+        },
+        readUI: () => (useUpscalingField.checked ? upscaleModelField.value : undefined),
+        parse: (val) => val
+    },
+    sampler: { name: 'Sampler',
+        setUI: (sampler) => {
+            samplerField.value = sampler
+        },
+        readUI: () => samplerField.value,
+        parse: (val) => val
+    },
+    use_stable_diffusion_model: { name: 'Stable Diffusion model',
+        setUI: (use_stable_diffusion_model) => {
+            stableDiffusionModelField.value = use_stable_diffusion_model
+        },
+        readUI: () => stableDiffusionModelField.value,
+        parse: (val) => val
+    },
+
+    numOutputsParallel: { name: 'Parallel Images',
+        setUI: (numOutputsParallel) => {
+            numOutputsParallelField.value = numOutputsParallel
+        },
+        readUI: () => parseInt(numOutputsParallelField.value),
+        parse: (val) => val
+    },
+
+    use_cpu: { name: 'Use CPU',
+        setUI: (use_cpu) => {
+            useCPUField.checked = use_cpu
+        },
+        readUI: () => useCPUField.checked,
+        parse: (val) => val
+    },
+    turbo: { name: 'Turbo',
+        setUI: (turbo) => {
+            turboField.checked = turbo
+        },
+        readUI: () => turboField.checked,
+        parse: (val) => Boolean(val)
+    },
+    use_full_precision: { name: 'Use Full Precision',
+        setUI: (use_full_precision) => {
+            useFullPrecisionField.checked = use_full_precision
+        },
+        readUI: () => useFullPrecisionField.checked,
+        parse: (val) => Boolean(val)
+    },
+
+    stream_image_progress: { name: 'Stream Image Progress',
+        setUI: (stream_image_progress) => {
+            streamImageProgressField.checked = (parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress)
+        },
+        readUI: () => streamImageProgressField.checked,
+        parse: (val) => Boolean(val)
+    },
+    show_only_filtered_image: { name: 'Show only the corrected/upscaled image',
+        setUI: (show_only_filtered_image) => {
+            showOnlyFilteredImageField.checked = show_only_filtered_image
+        },
+        readUI: () => showOnlyFilteredImageField.checked,
+        parse: (val) => Boolean(val)
+    },
+    output_format: { name: 'Output Format',
+        setUI: (output_format) => {
+            outputFormatField.value = output_format
+        },
+        readUI: () => outputFormatField.value,
+        parse: (val) => val
+    },
+    save_to_disk_path: { name: 'Save to disk path',
+        setUI: (save_to_disk_path) => {
+            saveToDiskField.checked = Boolean(save_to_disk_path)
+            diskPathField.value = save_to_disk_path
+        },
+        readUI: () => diskPathField.value,
+        parse: (val) => val
+    }
+}
+function restoreTaskToUI(task) {
+    if ('numOutputsTotal' in task) {
+        numOutputsTotalField.value = task.numOutputsTotal
+    }
+    if ('seed' in task) {
+        randomSeedField.checked = false
+        seedField.value = task.seed
+    }
+    if (!('reqBody' in task)) {
+        return
+    }
+    for (const key in TASK_MAPPING) {
+        if (key in task.reqBody) {
+            TASK_MAPPING[key].setUI(task.reqBody[key])
+        }
+    }
+}
+
+const TASK_TEXT_MAPPING = {
+    width: 'Width',
+    height: 'Height',
+    seed: 'Seed',
+    num_inference_steps: 'Steps',
+    guidance_scale: 'Guidance Scale',
+    prompt_strength: 'Prompt Strength',
+    use_face_correction: 'Use Face Correction',
+    use_upscale: 'Use Upscaling',
+    sampler: 'Sampler',
+    negative_prompt: 'Negative Prompt',
+    use_stable_diffusion_model: 'Stable Diffusion model'
+}
+const afterPromptRe = /^\s*Width\s*:\s*\d+\s*(?:\r\n|\r|\n)+\s*Height\s*:\s*\d+\s*(\r\n|\r|\n)+Seed\s*:\s*\d+\s*$/igm
+const lineEndRe = /(?:\r\n|\r|\n)+/igm
+function parseTaskFromText(str) {
+    const taskReqBody = {}
+
+    // Prompt
+    afterPromptRe.lastIndex = 0
+    const match = afterPromptRe.exec(str);
+    if (match) {
+        let prompt = str.slice(0, match.index)
+        str = str.slice(prompt.length)
+        taskReqBody.prompt = prompt.trim()
+        console.log('Prompt:', taskReqBody.prompt)
+    }
+    for (const key in TASK_TEXT_MAPPING) {
+        const name = TASK_TEXT_MAPPING[key];
+        let val = undefined
+        if (str.startsWith(name + ':')) {
+            // Backend format, faster
+            lineEndRe.lastIndex = 0
+            const endMatch = lineEndRe.exec(str)
+            if (endMatch) {
+                val = str.slice(name.length + 1, endMatch.index)
+                str = str.slice(endMatch.index + endMatch[0].length)
+            } else {
+                val = str.slice(name.length + 1)
+                str = ""
+            }
+        } else {
+            // User formatted, use regex to get all cases, but slower.
+            const reName = new RegExp(`${name}\\s*:\\s*(.*)(?:\\r\\n|\\r|\\n)*`, 'igm')
+            const match = reName.exec(str);
+            if (match) {
+                str = str.slice(0, match.index) + str.slice(match.index + match[0].length)
+                val = match[1]
+            }
+        }
+        if (val) {
+            taskReqBody[key] = TASK_MAPPING[key].parse(val.trim())
+            console.log(TASK_MAPPING[key].name + ':', taskReqBody[key])
+            if (!str) {
+                break;
+            }
+        }
+    }
+    if (Object.keys(taskReqBody).length <= 0) {
+        return undefined
+    }
+    const task = { reqBody: taskReqBody }
+    if ('seed' in taskReqBody) {
+        task.seed = taskReqBody.seed
+    }
+    return task
+}
+
+async function readFile(file, i) {
+    const fileContent = (await file.text()).trim()
+
+    // JSON File.
+    if (fileContent.startsWith('{') && fileContent.endsWith('}')) {
+        try {
+            const task = JSON.parse(fileContent)
+            restoreTaskToUI(task)
+        } catch (e) {
+            console.warn(`file[${i}]:${file.name} - File couldn't be parsed.`, e)
+        }
+        return
+    }
+
+    // Normal txt file.
+    const task = parseTaskFromText(fileContent)
+    if (task) {
+        restoreTaskToUI(task)
+    } else {
+        console.warn(`file[${i}]:${file.name} - File couldn't be parsed.`)
+    }
+}
+
+function dropHandler(ev) {
+    console.log('Content dropped...')
+    // Prevent default behavior (Prevent file/content from being opened)
+    ev.preventDefault()
+
+    if (ev?.dataTransfer?.items) { // Use DataTransferItemList interface
+        Array.from(ev.dataTransfer.items).forEach(function(item, i) {
+            if (item.kind === 'file') {
+                const file = item.getAsFile()
+                readFile(file, i)
+            }
+        })
+    } else if (ev?.dataTransfer?.files) { // Use DataTransfer interface
+        Array.from(ev.dataTransfer.files).forEach(readFile)
+    }
+}
+function dragOverHandler(ev) {
+    console.log('Content in drop zone')
+
+    // Prevent default behavior (Prevent file/content from being opened)
+    ev.preventDefault()
+
+    ev.dataTransfer.dropEffect = "copy"
+
+    let img = new Image()
+    img.src = location.host + '/media/images/favicon-32x32.png'
+    ev.dataTransfer.setDragImage(img, 16, 16)
+}
+
+document.addEventListener("drop", dropHandler)
+document.addEventListener("dragover", dragOverHandler)

From 965efc3a136a40645e7f5cb470be50562d4c8fef Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Sun, 30 Oct 2022 23:35:42 -0400
Subject: [PATCH 02/10] Restore old values if invalid values for the dropdown
 was used.

---
 ui/media/js/dnd.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 909f92d8..4056debb 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -17,14 +17,22 @@ const TASK_MAPPING = {
     },
     width: { name: 'Width',
         setUI: (width) => {
+            const oldVal = widthField.value
             widthField.value = width
+            if (!widthField.value) {
+                widthField.value = oldVal
+            }
         },
         readUI: () => parseInt(widthField.value),
         parse: (val) => parseInt(val)
     },
     height: { name: 'Height',
         setUI: (height) => {
+            const oldVal = heightField.value
             heightField.value = height
+            if (!heightField.value) {
+                heightField.value = oldVal
+            }
         },
         readUI: () => parseInt(heightField.value),
         parse: (val) => parseInt(val)
@@ -103,7 +111,11 @@ const TASK_MAPPING = {
     },
     use_stable_diffusion_model: { name: 'Stable Diffusion model',
         setUI: (use_stable_diffusion_model) => {
+            const oldVal = stableDiffusionModelField.value
             stableDiffusionModelField.value = use_stable_diffusion_model
+            if (!stableDiffusionModelField.value) {
+                stableDiffusionModelField.value = oldVal
+            }
         },
         readUI: () => stableDiffusionModelField.value,
         parse: (val) => val

From 83d541b60d72c5248889250db301b2eca39748ae Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Sun, 30 Oct 2022 23:41:26 -0400
Subject: [PATCH 03/10] Fixed model parsing...

---
 ui/media/js/dnd.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 4056debb..f2602f6e 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -112,7 +112,17 @@ const TASK_MAPPING = {
     use_stable_diffusion_model: { name: 'Stable Diffusion model',
         setUI: (use_stable_diffusion_model) => {
             const oldVal = stableDiffusionModelField.value
+
+            const pathIdx = use_stable_diffusion_model.lastIndexOf('/')
+            if (pathIdx >= 0) {
+                use_stable_diffusion_model = use_stable_diffusion_model.slice(pathIdx + 1)
+            }
+            if (use_stable_diffusion_model.endsWith('.ckpt')) {
+                use_stable_diffusion_model = use_stable_diffusion_model.slice(0, use_stable_diffusion_model.length - 5)
+            }
+
             stableDiffusionModelField.value = use_stable_diffusion_model
+
             if (!stableDiffusionModelField.value) {
                 stableDiffusionModelField.value = oldVal
             }

From f92bca58fafdde9f412171d71611b1183f2fe95e Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Mon, 31 Oct 2022 01:01:56 -0400
Subject: [PATCH 04/10] Lines endings...

---
 ui/media/js/dnd.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index f2602f6e..a2d51211 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -229,7 +229,7 @@ function parseTaskFromText(str) {
 
     // Prompt
     afterPromptRe.lastIndex = 0
-    const match = afterPromptRe.exec(str);
+    const match = afterPromptRe.exec(str)
     if (match) {
         let prompt = str.slice(0, match.index)
         str = str.slice(prompt.length)
@@ -263,7 +263,7 @@ function parseTaskFromText(str) {
             taskReqBody[key] = TASK_MAPPING[key].parse(val.trim())
             console.log(TASK_MAPPING[key].name + ':', taskReqBody[key])
             if (!str) {
-                break;
+                break
             }
         }
     }

From ce16e61e63382d525d8ba3cac0999867d9d772cf Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Mon, 31 Oct 2022 01:02:23 -0400
Subject: [PATCH 05/10] Adds a copy as JSON button.

---
 ui/media/js/dnd.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index a2d51211..4966a313 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -209,6 +209,18 @@ function restoreTaskToUI(task) {
     }
 }
 
+function readUIasJSON() {
+    const reqBody = {}
+    for (const key in TASK_MAPPING) {
+        reqBody[key] = TASK_MAPPING[key].readUI()
+    }
+    return {
+        'numOutputsTotal': parseInt(numOutputsTotalField.value),
+        'seed': TASK_MAPPING['seed'].readUI(),
+        'reqBody': reqBody
+    }
+}
+
 const TASK_TEXT_MAPPING = {
     width: 'Width',
     height: 'Height',
@@ -331,3 +343,41 @@ function dragOverHandler(ev) {
 
 document.addEventListener("drop", dropHandler)
 document.addEventListener("dragover", dragOverHandler)
+
+// Adds a copy icon if the browser grants permission to write to clipboard.
+function checkWriteToClipboardPermission (result) {
+    if (result.state == "granted" || result.state == "prompt") {
+        const style = document.createElement('style');
+        style.textContent = `
+        #copy-image-settings {
+            cursor: pointer;
+            padding: 8px;
+            opacity: 1;
+            transition: opacity 0.5;
+        }
+        .collapsible:not(.active) #copy-image-settings {
+            display: none;
+        }
+        #copy-image-settings.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }`;
+        document.head.append(style);
+        const resetSettings = document.getElementById('reset-image-settings')
+        const copyIcon = document.createElement('i')
+        copyIcon.id = 'copy-image-settings'
+        copyIcon.className = 'fa-solid fa-clipboard'
+        copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>`
+        copyIcon.addEventListener('click', (event) => {
+            event.stopPropagation()
+            navigator.clipboard.writeText(JSON.stringify(readUIasJSON()))
+        })
+        resetSettings.parentNode.insertBefore(copyIcon, resetSettings)
+    }
+}
+navigator.permissions.query({ name: "clipboard-write" }).then(checkWriteToClipboardPermission, (e) => {
+    if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === 'function') {
+        // Fix for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1560373
+        checkWriteToClipboardPermission({state:"granted"})
+    }
+})

From 268d7495cc5949b58b297b2d50148e1d8a8101d2 Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Mon, 31 Oct 2022 01:13:04 -0400
Subject: [PATCH 06/10] Naming...

---
 ui/media/js/dnd.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 4966a313..0aff170e 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -208,8 +208,7 @@ function restoreTaskToUI(task) {
         }
     }
 }
-
-function readUIasJSON() {
+function readUI() {
     const reqBody = {}
     for (const key in TASK_MAPPING) {
         reqBody[key] = TASK_MAPPING[key].readUI()
@@ -370,7 +369,7 @@ function checkWriteToClipboardPermission (result) {
         copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>`
         copyIcon.addEventListener('click', (event) => {
             event.stopPropagation()
-            navigator.clipboard.writeText(JSON.stringify(readUIasJSON()))
+            navigator.clipboard.writeText(JSON.stringify(readUI()))
         })
         resetSettings.parentNode.insertBefore(copyIcon, resetSettings)
     }

From 93b3419737d0d3fe792472f3f5f403d9b8feda64 Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Tue, 1 Nov 2022 04:54:38 -0400
Subject: [PATCH 07/10] Better human formatted JSON

---
 ui/media/js/dnd.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 0aff170e..86976b1c 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -369,7 +369,7 @@ function checkWriteToClipboardPermission (result) {
         copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>`
         copyIcon.addEventListener('click', (event) => {
             event.stopPropagation()
-            navigator.clipboard.writeText(JSON.stringify(readUI()))
+            navigator.clipboard.writeText(JSON.stringify(readUI(), undefined, 4))
         })
         resetSettings.parentNode.insertBefore(copyIcon, resetSettings)
     }

From c0350e5be7151391aad174b15d3abb46ea975d2d Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Tue, 1 Nov 2022 04:52:42 -0400
Subject: [PATCH 08/10] Moved file ext to a var.

---
 ui/media/js/dnd.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 86976b1c..f38c08a3 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -117,8 +117,9 @@ const TASK_MAPPING = {
             if (pathIdx >= 0) {
                 use_stable_diffusion_model = use_stable_diffusion_model.slice(pathIdx + 1)
             }
-            if (use_stable_diffusion_model.endsWith('.ckpt')) {
-                use_stable_diffusion_model = use_stable_diffusion_model.slice(0, use_stable_diffusion_model.length - 5)
+            const modelExt = '.ckpt'
+            if (use_stable_diffusion_model.endsWith(modelExt)) {
+                use_stable_diffusion_model = use_stable_diffusion_model.slice(0, use_stable_diffusion_model.length - modelExt.length)
             }
 
             stableDiffusionModelField.value = use_stable_diffusion_model

From 045ad78bb92450a03966d161e001fbda59dc785d Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Wed, 2 Nov 2022 10:53:48 -0400
Subject: [PATCH 09/10] Added calls to update sliders.

---
 ui/media/js/dnd.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index f38c08a3..57f05cec 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -59,6 +59,7 @@ const TASK_MAPPING = {
     guidance_scale: { name: 'Guidance Scale',
         setUI: (guidance_scale) => {
             guidanceScaleField.value = guidance_scale
+            updateGuidanceScaleSlider()
         },
         readUI: () => parseFloat(guidanceScaleField.value),
         parse: (val) => parseFloat(val)
@@ -66,6 +67,7 @@ const TASK_MAPPING = {
     prompt_strength: { name: 'Prompt Strength',
         setUI: (prompt_strength) => {
             promptStrengthField.value = prompt_strength
+            updatePromptStrengthSlider()
         },
         readUI: () => parseFloat(promptStrengthField.value),
         parse: (val) => parseFloat(val)

From 950b226374bbb7e8fd5461733189daf69064218c Mon Sep 17 00:00:00 2001
From: Marc-Andre Ferland <madrang@gmail.com>
Date: Thu, 3 Nov 2022 02:09:42 -0400
Subject: [PATCH 10/10] Moved copy icon css to main.css

---
 ui/media/css/main.css | 13 +++++++++++++
 ui/media/js/dnd.js    | 16 ----------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 9f8bca08..ff9249f4 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -569,6 +569,19 @@ input::file-selector-button {
     position: relative;
     transform: translateY(-13%);
 }
+ #copy-image-settings {
+    cursor: pointer;
+    padding: 8px;
+    opacity: 1;
+    transition: opacity 0.5;
+}
+.collapsible:not(.active) #copy-image-settings {
+    display: none;
+}
+#copy-image-settings.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
 
 .simple-tooltip {
 	border-radius: 3px;
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 57f05cec..7fcd9c22 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -349,22 +349,6 @@ document.addEventListener("dragover", dragOverHandler)
 // Adds a copy icon if the browser grants permission to write to clipboard.
 function checkWriteToClipboardPermission (result) {
     if (result.state == "granted" || result.state == "prompt") {
-        const style = document.createElement('style');
-        style.textContent = `
-        #copy-image-settings {
-            cursor: pointer;
-            padding: 8px;
-            opacity: 1;
-            transition: opacity 0.5;
-        }
-        .collapsible:not(.active) #copy-image-settings {
-            display: none;
-        }
-        #copy-image-settings.hidden {
-            opacity: 0;
-            pointer-events: none;
-        }`;
-        document.head.append(style);
         const resetSettings = document.getElementById('reset-image-settings')
         const copyIcon = document.createElement('i')
         copyIcon.id = 'copy-image-settings'