From 7002453a35a2bffdd22d2a7f949215e0d47d146f Mon Sep 17 00:00:00 2001
From: moonshinegloss <118488816+moonshinegloss@users.noreply.github.com>
Date: Thu, 9 Feb 2023 05:06:59 +0100
Subject: [PATCH] update v3.0
- much better displaying of parameters and prompt in the vein of idea in #5 however not yet with a new reveal button
- fix possible xss vulnerability
---
discord-prompt.user.js | 108 +++++++++++++++++++++++++++++++++++------
1 file changed, 92 insertions(+), 16 deletions(-)
diff --git a/discord-prompt.user.js b/discord-prompt.user.js
index 2fce049..006de8e 100644
--- a/discord-prompt.user.js
+++ b/discord-prompt.user.js
@@ -1,7 +1,7 @@
// ==UserScript==
// @name png metadata discord
// @author moonshine
-// @version 2.7
+// @version 3.0
// @updateURL https://raw.githubusercontent.com/moonshinegloss/stable-diffusion-discord-prompts/main/discord-prompt.user.js
// @match https://discord.com/channels/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=discord.com
@@ -49,26 +49,71 @@ async function getMetaData(chunks) {
return false;
}
+function sanitize(input) {
+ const div = document.createElement('div');
+ div.innerText = input;
+ return div.innerHTML;
+}
+
async function addRevealPrompt(chunks,node) {
try {
const container_selector = node.closest("div[class*='messageAttachment-']")
- const params = await getMetaData(chunks);
+ let params = await getMetaData(chunks);
// ignore images that have been processed already
if(params && !container_selector.className.includes("prompt-preview-container")) {
// style the image preview, while preserving discord click events for spoilers/lightbox
node.classList.add("prompt-preview");
+ const tag = (name,value) => `${sanitize(name)}${sanitize(value)}
`
+ let tags_html = tag("Prompt",params)
+
+ if (params.includes("Steps:")) {
+ let parameters = params
+ .split("Steps:")[1]
+ .split(",")
+ .map((x, i) => {
+ const ret = x.split(":").map((y) => y.trim());
+ return i == 0 ? ["Steps", ...ret] : ret;
+ });
+
+ // add negative prompt first so it'll be second if present
+ let prompts = params.split("Steps:")[0];
+ if (params.includes("Negative prompt:")) {
+ const negative_prompt = prompts.split("Negative prompt:")[1];
+ prompts = prompts.split("Negative prompt:")[0];
+ parameters.unshift(["Negative", negative_prompt.trim()]);
+ }
+
+ // add prompt up front
+ parameters.unshift(["Prompt", prompts.trim()]);
+
+ parameters = parameters.map(
+ (x) => tag(...x)
+ );
+
+ tags_html = parameters.splice(0, 7).join("");
+
+ if(parameters.length > 7) {
+ tags_html += `
+
+ Show All
+ ${parameters.splice(7).join("")}
+
+ `;
+ }
+ }
+
container_selector.classList.add("prompt-preview-container");
container_selector.style.flexDirection = "column";
const revealPrompt = document.createElement("div");
revealPrompt.innerHTML = `
-
- Reveal Prompt
-
-
- `
+
+ Reveal Prompt
+ ${tags_html}
+
+ `;
container_selector.prepend(revealPrompt);
}
@@ -125,20 +170,20 @@ async function refreshImages(nodes) {
const workers = 4
for(let i = nodes.length-1; i >= 0; i--) {
- const source = nodes?.[i]?.querySelector("img")?.src
+ const source = nodes?.[i]?.querySelector("img")?.src
- if(!validURL(source)) continue;
- if(nodes[i].className.includes("processed")) continue;
- if(showLoadingBorder) nodes[i].classList.add("prompt-preview-processing");
+ if(!validURL(source)) continue;
+ if(nodes[i].className.includes("processed")) continue;
+ if(showLoadingBorder) nodes[i].classList.add("prompt-preview-processing");
- queue.push(() => {
- const url = source.replace("media.discordapp.net","cdn.discordapp.com")
- processURL(url,nodes[i]);
- })
+ queue.push(() => {
+ const url = source.replace("media.discordapp.net","cdn.discordapp.com")
+ processURL(url,nodes[i]);
+ })
}
while (queue.length) {
- await Promise.all(queue.splice(0, workers).map(f => f()))
+ await Promise.all(queue.splice(0, workers).map(f => f()))
}
}
@@ -184,6 +229,12 @@ async function hook() {
.promptTXT {
border: 3px solid ${borderColor};
+ padding: 20px;
+ }
+
+ .parametersTXT, .promptTXT {
+ padding-top: 10px;
+ padding-bottom:0;
}
.prompt-preview-processing {
@@ -206,6 +257,31 @@ async function hook() {
border-radius:7px;
border-top-left-radius:0;
}
+
+ .tag {
+ margin-bottom: 8px;
+ }
+
+ .showParametersBTN {
+ background: ${borderColor};
+ cursor: pointer;
+ display: block;
+ padding: 10px 30px;
+ text-align: center;
+ margin-top: 10px;
+ margin-left: -20px;
+ margin-right: -20px;
+ }
+
+ .tag span:first-of-type {
+ margin-left: -20px;
+ background: ${borderColor};
+ padding: 5px;
+ display: inline-block;
+ margin-right: 10px;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ }
`);
new MutationObserver(function(mutations) {