Spaces:
Running
Running
Update _res/_custom.js
Browse files- _res/_custom.js +312 -290
_res/_custom.js
CHANGED
|
@@ -1,290 +1,312 @@
|
|
| 1 |
-
function gradioCustomJS() {
|
| 2 |
-
console.log("gradioCustomJS Started")
|
| 3 |
-
|
| 4 |
-
// MARK: berechne Helligkeit der Akzentfarbe
|
| 5 |
-
function berechneHelligkeit(rgb) {
|
| 6 |
-
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
|
| 7 |
-
if (!match) {
|
| 8 |
-
throw new Error("Ungültiges Farbformat")
|
| 9 |
-
}
|
| 10 |
-
|
| 11 |
-
const r = parseInt(match[1]) / 255
|
| 12 |
-
const g = parseInt(match[2]) / 255
|
| 13 |
-
const b = parseInt(match[3]) / 255
|
| 14 |
-
|
| 15 |
-
const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
|
| 16 |
-
const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
|
| 17 |
-
const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
|
| 18 |
-
|
| 19 |
-
const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin
|
| 20 |
-
|
| 21 |
-
return luminanz
|
| 22 |
-
}
|
| 23 |
-
|
| 24 |
-
// MARK: Textfarbe bestimmen
|
| 25 |
-
function anpasseTextfarbe(farbe) {
|
| 26 |
-
const luminanz = berechneHelligkeit(farbe)
|
| 27 |
-
const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
|
| 28 |
-
console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)
|
| 29 |
-
|
| 30 |
-
return textFarbe
|
| 31 |
-
}
|
| 32 |
-
|
| 33 |
-
const body = document.querySelector("body")
|
| 34 |
-
body.className = "dark"
|
| 35 |
-
|
| 36 |
-
// Catppuccin colors
|
| 37 |
-
const rosewater = "245, 224, 220"
|
| 38 |
-
const flamingo = "242, 205, 205"
|
| 39 |
-
const pink = "245, 194, 231"
|
| 40 |
-
const mauve = "203, 166, 247"
|
| 41 |
-
const red = "243, 139, 168"
|
| 42 |
-
const maroon = "235, 160, 172"
|
| 43 |
-
const peach = "250, 179, 135"
|
| 44 |
-
const yellow = "249, 226, 175"
|
| 45 |
-
const green = "166, 227, 161"
|
| 46 |
-
const teal = "148, 226, 213"
|
| 47 |
-
const sky = "137, 220, 235"
|
| 48 |
-
const sapphire = "116, 199, 236"
|
| 49 |
-
const blue = "137, 180, 250"
|
| 50 |
-
|
| 51 |
-
let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue]
|
| 52 |
-
let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
|
| 53 |
-
|
| 54 |
-
body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")")
|
| 55 |
-
body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")")
|
| 56 |
-
body.style.setProperty("--cat-pink", "rgb(" + pink + ")")
|
| 57 |
-
body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")")
|
| 58 |
-
body.style.setProperty("--cat-red", "rgb(" + red + ")")
|
| 59 |
-
body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")")
|
| 60 |
-
body.style.setProperty("--cat-peach", "rgb(" + peach + ")")
|
| 61 |
-
body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")")
|
| 62 |
-
body.style.setProperty("--cat-green", "rgb(" + green + ")")
|
| 63 |
-
body.style.setProperty("--cat-teal", "rgb(" + teal + ")")
|
| 64 |
-
body.style.setProperty("--cat-sky", "rgb(" + sky + ")")
|
| 65 |
-
body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")")
|
| 66 |
-
body.style.setProperty("--cat-blue", "rgb(" + blue + ")")
|
| 67 |
-
|
| 68 |
-
body.style.setProperty("--primary-600", usedColor)
|
| 69 |
-
body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")
|
| 70 |
-
body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)")
|
| 71 |
-
body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)")
|
| 72 |
-
body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)")
|
| 73 |
-
body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)")
|
| 74 |
-
body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)")
|
| 75 |
-
body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)")
|
| 76 |
-
body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)")
|
| 77 |
-
body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)")
|
| 78 |
-
body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)")
|
| 79 |
-
|
| 80 |
-
body.style.setProperty("--button-primary-background-fill", "var(--primary-600)")
|
| 81 |
-
body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)")
|
| 82 |
-
body.style.setProperty("--blur-value", "0px")
|
| 83 |
-
body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
|
| 84 |
-
|
| 85 |
-
// MARK: Selectors & Elements
|
| 86 |
-
const gradioApp = document.querySelector("gradio-app")
|
| 87 |
-
const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container")
|
| 88 |
-
const dominantColorField = document.querySelector("#dominant_image_color > label > textarea")
|
| 89 |
-
const outputImageElem = document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img")
|
| 90 |
-
const alertModalElem = document.createElement("div")
|
| 91 |
-
const alertModalElemP = document.createElement("p")
|
| 92 |
-
const alertModalElemI = document.createElement("i")
|
| 93 |
-
alertModalElemI.className = "fas fa-exclamation-circle"
|
| 94 |
-
const alertModalElemSpan = document.createElement("span")
|
| 95 |
-
alertModalElemSpan.id = "alertModalText"
|
| 96 |
-
const alertModalElemButton = document.createElement("button")
|
| 97 |
-
alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
|
| 98 |
-
alertModalElemButton.id = "alertModalBtn"
|
| 99 |
-
alertModalElemButton.textContent = "Ok"
|
| 100 |
-
alertModalElemP.id = "alertModalP"
|
| 101 |
-
alertModalElemP.append(alertModalElemI, alertModalElemSpan)
|
| 102 |
-
alertModalElem.id = "alertModal"
|
| 103 |
-
alertModalElem.style.display = "none"
|
| 104 |
-
alertModalElem.append(alertModalElemP, alertModalElemButton)
|
| 105 |
-
//alertModalElem.innerHTML = '<p></p>'
|
| 106 |
-
gradioApp.appendChild(alertModalElem)
|
| 107 |
-
|
| 108 |
-
alertModalElemButton.addEventListener("click", () => {
|
| 109 |
-
oldText = alertModalElemSpan.textContent
|
| 110 |
-
alertModalElemButton.disabled = true
|
| 111 |
-
if (alertModalElemButton.textContent == "Noch mal?") {
|
| 112 |
-
alertModalElemSpan.innerHTML = 'Na gut, noch mal. <br/>Der "Ok" ... ne, der "Noch mal?" Button ändert nur diesen Text. 😉 In 10 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
|
| 113 |
-
setTimeout(() => {
|
| 114 |
-
alertModalElemSpan.textContent = oldText
|
| 115 |
-
alertModalElemButton.disabled = false
|
| 116 |
-
alertModalElemButton.textContent = "Noch mal?"
|
| 117 |
-
}, 10000)
|
| 118 |
-
} else if (alertModalElemButton.textContent == "Ok") {
|
| 119 |
-
alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢<br/>In 6 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
|
| 120 |
-
setTimeout(() => {
|
| 121 |
-
alertModalElemSpan.textContent = oldText
|
| 122 |
-
alertModalElemButton.disabled = false
|
| 123 |
-
alertModalElemButton.textContent = "Noch mal?"
|
| 124 |
-
}, 6000)
|
| 125 |
-
}
|
| 126 |
-
})
|
| 127 |
-
|
| 128 |
-
const prompt_input = document.querySelector("#prompt_input")
|
| 129 |
-
prompt_input.setAttribute("autocomplete", "off")
|
| 130 |
-
prompt_input.setAttribute("autocorrect", "off")
|
| 131 |
-
prompt_input.setAttribute("autocapitalize", "off")
|
| 132 |
-
prompt_input.setAttribute("spellcheck", "false")
|
| 133 |
-
|
| 134 |
-
const switch_width_height = document.querySelector("#switch_width_height")
|
| 135 |
-
const random_prompt_btn = document.querySelector("#random_prompt_btn")
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
observer
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
|
| 178 |
-
|
| 179 |
-
|
| 180 |
-
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
|
| 208 |
-
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
|
| 213 |
-
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
|
| 229 |
-
//
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
|
| 233 |
-
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
|
| 257 |
-
|
| 258 |
-
|
| 259 |
-
|
| 260 |
-
|
| 261 |
-
|
| 262 |
-
|
| 263 |
-
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
|
| 269 |
-
|
| 270 |
-
|
| 271 |
-
|
| 272 |
-
|
| 273 |
-
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
|
| 287 |
-
|
| 288 |
-
|
| 289 |
-
|
| 290 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
function gradioCustomJS() {
|
| 2 |
+
console.log("gradioCustomJS Started")
|
| 3 |
+
|
| 4 |
+
// MARK: berechne Helligkeit der Akzentfarbe
|
| 5 |
+
function berechneHelligkeit(rgb) {
|
| 6 |
+
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
|
| 7 |
+
if (!match) {
|
| 8 |
+
throw new Error("Ungültiges Farbformat")
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
const r = parseInt(match[1]) / 255
|
| 12 |
+
const g = parseInt(match[2]) / 255
|
| 13 |
+
const b = parseInt(match[3]) / 255
|
| 14 |
+
|
| 15 |
+
const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
|
| 16 |
+
const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
|
| 17 |
+
const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
|
| 18 |
+
|
| 19 |
+
const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin
|
| 20 |
+
|
| 21 |
+
return luminanz
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
// MARK: Textfarbe bestimmen
|
| 25 |
+
function anpasseTextfarbe(farbe) {
|
| 26 |
+
const luminanz = berechneHelligkeit(farbe)
|
| 27 |
+
const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
|
| 28 |
+
console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)
|
| 29 |
+
|
| 30 |
+
return textFarbe
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
const body = document.querySelector("body")
|
| 34 |
+
body.className = "dark"
|
| 35 |
+
|
| 36 |
+
// Catppuccin colors
|
| 37 |
+
const rosewater = "245, 224, 220"
|
| 38 |
+
const flamingo = "242, 205, 205"
|
| 39 |
+
const pink = "245, 194, 231"
|
| 40 |
+
const mauve = "203, 166, 247"
|
| 41 |
+
const red = "243, 139, 168"
|
| 42 |
+
const maroon = "235, 160, 172"
|
| 43 |
+
const peach = "250, 179, 135"
|
| 44 |
+
const yellow = "249, 226, 175"
|
| 45 |
+
const green = "166, 227, 161"
|
| 46 |
+
const teal = "148, 226, 213"
|
| 47 |
+
const sky = "137, 220, 235"
|
| 48 |
+
const sapphire = "116, 199, 236"
|
| 49 |
+
const blue = "137, 180, 250"
|
| 50 |
+
|
| 51 |
+
let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue]
|
| 52 |
+
let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
|
| 53 |
+
|
| 54 |
+
body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")")
|
| 55 |
+
body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")")
|
| 56 |
+
body.style.setProperty("--cat-pink", "rgb(" + pink + ")")
|
| 57 |
+
body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")")
|
| 58 |
+
body.style.setProperty("--cat-red", "rgb(" + red + ")")
|
| 59 |
+
body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")")
|
| 60 |
+
body.style.setProperty("--cat-peach", "rgb(" + peach + ")")
|
| 61 |
+
body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")")
|
| 62 |
+
body.style.setProperty("--cat-green", "rgb(" + green + ")")
|
| 63 |
+
body.style.setProperty("--cat-teal", "rgb(" + teal + ")")
|
| 64 |
+
body.style.setProperty("--cat-sky", "rgb(" + sky + ")")
|
| 65 |
+
body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")")
|
| 66 |
+
body.style.setProperty("--cat-blue", "rgb(" + blue + ")")
|
| 67 |
+
|
| 68 |
+
body.style.setProperty("--primary-600", usedColor)
|
| 69 |
+
body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")
|
| 70 |
+
body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)")
|
| 71 |
+
body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)")
|
| 72 |
+
body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)")
|
| 73 |
+
body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)")
|
| 74 |
+
body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)")
|
| 75 |
+
body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)")
|
| 76 |
+
body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)")
|
| 77 |
+
body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)")
|
| 78 |
+
body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)")
|
| 79 |
+
|
| 80 |
+
body.style.setProperty("--button-primary-background-fill", "var(--primary-600)")
|
| 81 |
+
body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)")
|
| 82 |
+
body.style.setProperty("--blur-value", "0px")
|
| 83 |
+
body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
|
| 84 |
+
|
| 85 |
+
// MARK: Selectors & Elements
|
| 86 |
+
const gradioApp = document.querySelector("gradio-app")
|
| 87 |
+
const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container")
|
| 88 |
+
const dominantColorField = document.querySelector("#dominant_image_color > label > textarea")
|
| 89 |
+
const outputImageElem = document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img")
|
| 90 |
+
const alertModalElem = document.createElement("div")
|
| 91 |
+
const alertModalElemP = document.createElement("p")
|
| 92 |
+
const alertModalElemI = document.createElement("i")
|
| 93 |
+
alertModalElemI.className = "fas fa-exclamation-circle"
|
| 94 |
+
const alertModalElemSpan = document.createElement("span")
|
| 95 |
+
alertModalElemSpan.id = "alertModalText"
|
| 96 |
+
const alertModalElemButton = document.createElement("button")
|
| 97 |
+
alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
|
| 98 |
+
alertModalElemButton.id = "alertModalBtn"
|
| 99 |
+
alertModalElemButton.textContent = "Ok"
|
| 100 |
+
alertModalElemP.id = "alertModalP"
|
| 101 |
+
alertModalElemP.append(alertModalElemI, alertModalElemSpan)
|
| 102 |
+
alertModalElem.id = "alertModal"
|
| 103 |
+
alertModalElem.style.display = "none"
|
| 104 |
+
alertModalElem.append(alertModalElemP, alertModalElemButton)
|
| 105 |
+
//alertModalElem.innerHTML = '<p></p>'
|
| 106 |
+
gradioApp.appendChild(alertModalElem)
|
| 107 |
+
|
| 108 |
+
alertModalElemButton.addEventListener("click", () => {
|
| 109 |
+
oldText = alertModalElemSpan.textContent
|
| 110 |
+
alertModalElemButton.disabled = true
|
| 111 |
+
if (alertModalElemButton.textContent == "Noch mal?") {
|
| 112 |
+
alertModalElemSpan.innerHTML = 'Na gut, noch mal. <br/>Der "Ok" ... ne, der "Noch mal?" Button ändert nur diesen Text. 😉 In 10 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
|
| 113 |
+
setTimeout(() => {
|
| 114 |
+
alertModalElemSpan.textContent = oldText
|
| 115 |
+
alertModalElemButton.disabled = false
|
| 116 |
+
alertModalElemButton.textContent = "Noch mal?"
|
| 117 |
+
}, 10000)
|
| 118 |
+
} else if (alertModalElemButton.textContent == "Ok") {
|
| 119 |
+
alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢<br/>In 6 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
|
| 120 |
+
setTimeout(() => {
|
| 121 |
+
alertModalElemSpan.textContent = oldText
|
| 122 |
+
alertModalElemButton.disabled = false
|
| 123 |
+
alertModalElemButton.textContent = "Noch mal?"
|
| 124 |
+
}, 6000)
|
| 125 |
+
}
|
| 126 |
+
})
|
| 127 |
+
|
| 128 |
+
const prompt_input = document.querySelector("#prompt_input")
|
| 129 |
+
prompt_input.setAttribute("autocomplete", "off")
|
| 130 |
+
prompt_input.setAttribute("autocorrect", "off")
|
| 131 |
+
prompt_input.setAttribute("autocapitalize", "off")
|
| 132 |
+
prompt_input.setAttribute("spellcheck", "false")
|
| 133 |
+
|
| 134 |
+
const switch_width_height = document.querySelector("#switch_width_height")
|
| 135 |
+
const random_prompt_btn = document.querySelector("#random_prompt_btn")
|
| 136 |
+
const switch_ratio_btns = document.querySelectorAll("#image_ratio_buttons label")
|
| 137 |
+
|
| 138 |
+
// MARK: DOM Change Detection
|
| 139 |
+
function onDominantImageColorChange(callback) {
|
| 140 |
+
const observer = new MutationObserver(callback)
|
| 141 |
+
observer.observe(document.querySelector("#dominant_image_color"), {
|
| 142 |
+
childList: true,
|
| 143 |
+
subtree: true,
|
| 144 |
+
})
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
function onImageRatioButtonsChange(callback) {
|
| 148 |
+
const observer = new MutationObserver(callback)
|
| 149 |
+
observer.observe(document.querySelector("#image_ratio_buttons"), {
|
| 150 |
+
childList: true,
|
| 151 |
+
subtree: true,
|
| 152 |
+
})
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
function onDomElemChange(selector) {
|
| 156 |
+
return new Promise((resolve) => {
|
| 157 |
+
const element = document.querySelector(selector)
|
| 158 |
+
if (!element) {
|
| 159 |
+
console.error(`Element nicht gefunden: ${selector}`)
|
| 160 |
+
return
|
| 161 |
+
}
|
| 162 |
+
|
| 163 |
+
const observer = new MutationObserver((mutations) => {
|
| 164 |
+
mutations.forEach((mutation) => {
|
| 165 |
+
if (mutation.type === "childList" || mutation.type === "attributes") {
|
| 166 |
+
resolve(element)
|
| 167 |
+
}
|
| 168 |
+
})
|
| 169 |
+
})
|
| 170 |
+
|
| 171 |
+
observer.observe(element, {
|
| 172 |
+
childList: true,
|
| 173 |
+
subtree: true,
|
| 174 |
+
attributes: true,
|
| 175 |
+
})
|
| 176 |
+
|
| 177 |
+
// Wiederholt aufgerufen werden
|
| 178 |
+
function watch() {
|
| 179 |
+
observer.disconnect()
|
| 180 |
+
observer.observe(element, {
|
| 181 |
+
childList: true,
|
| 182 |
+
subtree: true,
|
| 183 |
+
attributes: true,
|
| 184 |
+
})
|
| 185 |
+
setTimeout(watch, 100)
|
| 186 |
+
}
|
| 187 |
+
watch()
|
| 188 |
+
})
|
| 189 |
+
}
|
| 190 |
+
|
| 191 |
+
onDominantImageColorChange(() => {
|
| 192 |
+
console.log("changed: " + document.querySelector("#dominant_image_color > label > textarea").value)
|
| 193 |
+
if (document.querySelector("#dominant_image_color > label > textarea").value.match(/^rgb\((\d{1,3}),(\s\d{1,3}),(\s\d{1,3})\)$/) && document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src) {
|
| 194 |
+
document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "0"
|
| 195 |
+
document.querySelector("body > gradio-app > div").classList.add("fade-bg")
|
| 196 |
+
document.querySelector("gradio-app").style.opacity = "0"
|
| 197 |
+
setTimeout(() => {
|
| 198 |
+
usedColor = document.querySelector("#dominant_image_color > label > textarea").value
|
| 199 |
+
body.style.setProperty("--primary-600", document.querySelector("#dominant_image_color > label > textarea").value)
|
| 200 |
+
body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(document.querySelector("#dominant_image_color > label > textarea").value))
|
| 201 |
+
gradioApp.classList.add("has-bg-image")
|
| 202 |
+
body.style.setProperty("--bg-image-path", `url("${document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src}")`)
|
| 203 |
+
}, 400)
|
| 204 |
+
setTimeout(() => {
|
| 205 |
+
gradioApp.style.opacity = "1"
|
| 206 |
+
document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "1"
|
| 207 |
+
document.querySelector("#dominant_image_color > label > textarea").value = ""
|
| 208 |
+
}, 800)
|
| 209 |
+
setTimeout(() => {
|
| 210 |
+
//document.querySelector("body > gradio-app > div").classList.remove("fade-bg")
|
| 211 |
+
}, 2000)
|
| 212 |
+
}
|
| 213 |
+
})
|
| 214 |
+
|
| 215 |
+
// MARK: SVGs
|
| 216 |
+
winking_hand__emoji =
|
| 217 |
+
'<svg aria-hidden="true" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 128 128"><style> @keyframes wink { 0%, 60%, 100% { transform: rotate(0deg); } 10%, 30%, 70%, 90% { transform: rotate(14deg); } 20%, 80% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } } </style><!-- Dein SVG-Inhalt --><g style="animation: wink 3s ease-in-out infinite; transform-origin: 50% 50%;"><radialGradient id="a" cx="-779.868" cy="686.689" r="91.008" gradientTransform="scale(1 -1) rotate(45 506.867 1318.897)" gradientUnits="userSpaceOnUse"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><path fill="url(#a)" d="M59.53 107.44c-3.95-3.17-40.63-38.84-41.04-39.23-1.62-1.62-2.64-3.3-2.92-4.84-.29-1.6.2-3 1.5-4.3 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59l16.63 15.98c.29.28.67.42 1.04.42a1.494 1.494 0 0 0 1.07-2.54L19.13 46.25c-2.66-2.66-3.91-6.73-.75-9.89 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59l27.16 26.48c.29.28.67.43 1.05.43s.77-.15 1.06-.44c.58-.58.59-1.52.01-2.11L24.91 28.02c-1.51-1.51-2.42-3.32-2.58-5.08-.15-1.79.48-3.45 1.83-4.8 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.58L67.3 51.31c.29.28.67.43 1.05.43s.77-.15 1.06-.44c.58-.58.59-1.52.01-2.11L45.26 24.36c-1.52-1.52-2.43-3.32-2.58-5.08-.15-1.79.48-3.45 1.83-4.8 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59 8.86 8.7 31.99 31.45 32.77 32.29 2.97 2.05 3.57-1.05 3.72-3.06.17-2.34-2.51-10.51-.95-17.86 2.62-9.77 10.17-8.17 10.34-8.09 4.14 1.94 3.35 4.84 1.88 10.67l-.15 1.15c-1.54 7.62 9.04 30.2 9.82 31.89 4.15 9.08 8.93 27.49-6.9 43.32-17.35 17.35-38.83 8.46-45.38 1.91z"/><path fill="#eda600" d="M81.79 117.18c-10.64 0-19.69-5.09-23.26-8.62-3.21-2.62-23.47-22.18-39.97-38.19-.67-.65-1.06-1.02-1.1-1.07-1.87-1.87-3.03-3.82-3.36-5.66-.38-2.09.27-3.98 1.91-5.63 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03l16.61 15.96-26.56-27.42c-3.06-3.06-4.6-8.13-.73-11.99 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03L56.45 62.5 23.84 29.07c-1.74-1.74-2.81-3.87-3-5.99-.19-2.26.59-4.33 2.26-6 1.5-1.5 3.34-2.29 5.34-2.29 2.34 0 4.7 1.07 6.65 3.02l33.26 32.43-24.16-24.83c-1.75-1.75-2.82-3.88-3-6-.19-2.25.59-4.32 2.26-5.99 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03l7.21 7.07c12.85 12.6 23.59 23.15 24.74 24.33.56.45 1.29.62 1.6.47.2-.1.42-.56.38-1.53-.06-1.7-.3-3.81-.55-6.04-.5-4.48-1.02-9.12-.37-12.18 1.42-5.31 4.21-7.56 6.29-8.53 2.86-1.32 5.63-.86 6.16-.61 5.2 2.44 4.17 6.52 2.75 12.18l-.03.14-.16 1.17c-1.04 5.12 4.3 19.27 9.64 30.8l.08.16c3.57 7.8 10 27.81-7.2 45.01-7.91 7.89-16.47 10.58-24.19 10.58zM21.35 58.72c-1.18 0-2.3.49-3.22 1.41-.95.95-1.28 1.87-1.08 2.97.22 1.21 1.11 2.65 2.5 4.05.01.01.41.4 1.1 1.06 23.42 22.73 37.56 36.24 39.82 38.06l.12.11c5.52 5.52 26.03 15.32 43.26-1.91 15.87-15.87 9.9-34.4 6.59-41.64l-.07-.15c-3.44-7.42-11.26-25.42-9.87-32.6l.23-1.5c1.54-6.12 1.63-7.4-.98-8.66-.77-.14-6.29-.81-8.4 7.06-.53 2.51-.02 7.1.43 11.15.26 2.29.5 4.46.56 6.27.1 2.85-1.25 3.94-2.07 4.34-1.67.81-3.66.12-4.9-.92l-.13-.12c-.61-.66-15.12-14.89-24.72-24.31L53.3 16.3c-2.46-2.47-5.63-2.88-7.76-.75-1.04 1.04-1.51 2.26-1.4 3.61.12 1.41.88 2.88 2.15 4.15L70.5 48.14a3.012 3.012 0 0 1-.02 4.22c-1.11 1.11-3.07 1.13-4.21.03L32.98 19.94c-2.46-2.46-5.64-2.87-7.76-.74-1.04 1.04-1.51 2.26-1.4 3.61.13 1.41.89 2.89 2.15 4.14L58.6 60.41c1.15 1.16 1.14 3.06-.02 4.22-1.11 1.11-3.07 1.13-4.21.03L27.2 38.17c-2.46-2.48-5.64-2.88-7.76-.75-2.59 2.59-1.21 5.8.75 7.77l26.57 27.44a2.988 2.988 0 0 1-.03 4.2c-1.12 1.12-3.06 1.13-4.2.04L25.9 60.89c-1.4-1.41-3.01-2.17-4.55-2.17z"/><path fill="#eda600" d="M84.76 46.54c-5.49 11.21-4.78 26.9 3.46 39.49.93 1.7 2.52.87 1.71-.88-9.95-21.29.48-36.63.48-36.63l-5.65-1.98z"/><path fill="#b0bec5" d="M63.17 4.5c3.02-.79 6.24-.72 9.37.01 3.11.75 6.22 2.33 8.53 4.91 2.26 2.56 3.65 5.67 4.12 8.93.44 3.23.03 6.56-1.5 9.32-.18-3.1-.72-5.95-1.63-8.58-.47-1.31-1.02-2.56-1.69-3.74-.66-1.17-1.44-2.33-2.27-3.28-1.69-1.95-3.98-3.47-6.55-4.65-2.58-1.22-5.39-2.12-8.38-2.92z"/><path fill="#90a4ae" d="M64 13.98c1.67-1.06 3.76-1.28 5.73-.93 1.99.35 3.89 1.34 5.39 2.71 1.49 1.39 2.55 3.14 3.21 4.96.32.91.48 1.87.63 2.8.05.96.05 1.92-.1 2.88-.69-.73-1.23-1.46-1.74-2.17-.59-.67-1.05-1.38-1.58-2.03-1.04-1.29-2.05-2.46-3.14-3.5-1.12-1.01-2.3-1.9-3.67-2.67-1.36-.79-2.89-1.45-4.73-2.05z"/><path fill="#b0bec5" d="M6.83 77.34c1.41 2.76 2.88 5.32 4.59 7.58 1.7 2.26 3.65 4.18 5.92 5.43 1.1.61 2.41 1.14 3.69 1.54 1.29.41 2.63.69 4.01.88 2.76.34 5.66.28 8.73-.19-2.38 2.07-5.56 3.17-8.8 3.41-3.28.22-6.61-.49-9.59-2.17-3-1.71-5.2-4.43-6.58-7.32-1.38-2.91-2.12-6.04-1.97-9.16z"/><path fill="#90a4ae" d="M16.28 76.17c.97 1.68 1.93 3.03 2.98 4.21 1.04 1.18 2.16 2.15 3.38 3.03 1.24.85 2.6 1.6 4.08 2.35.74.38 1.53.68 2.31 1.12.81.35 1.63.72 2.49 1.25-.91.34-1.84.54-2.79.69-.94.04-1.91.09-2.87-.04-1.92-.26-3.84-.93-5.52-2.1-1.65-1.19-3.02-2.84-3.77-4.71-.76-1.86-.98-3.94-.29-5.8z"/></g></svg>'
|
| 218 |
+
|
| 219 |
+
random_prompt_btn.innerHTML =
|
| 220 |
+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M42.15 9.85C41.58 9.28 40.9 9 40.12 9H7.88c-.78 0-1.46.28-2.03.85S5 11.1 5 11.88v24.23c0 .78.28 1.46.85 2.03s1.25.85 2.03.85h32.23c.78 0 1.46-.28 2.03-.85s.85-1.25.85-2.03V11.88c0-.78-.28-1.46-.85-2.03ZM13.66 30.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Z"/></g></svg>'
|
| 221 |
+
const enhance_prompt_btn = document.querySelector("#enhance_prompt_btn")
|
| 222 |
+
enhance_prompt_btn.innerHTML =
|
| 223 |
+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="m33.91 29.59 9.37-8.07h.38c.4.05.72.21.95.49.23.28.35.59.35.91 0 .18-.05.37-.14.55-.09.18-.22.35-.37.5l-7.55 6.48 2.31 10s.04.1.04.17v.14c0 .41-.14.73-.42.98-.28.24-.6.37-.97.37-.12 0-.24-.01-.37-.04s-.25-.07-.37-.13l-.4-.27-2.8-12.09Zm-4.95-15.31-3-7.1.16-.33c.1-.27.26-.47.5-.63.24-.15.49-.23.75-.23.24 0 .49.07.74.22s.43.36.55.65l3.25 7.67-2.95-.26ZM12.1 37.29l8.69-5.23 8.69 5.29-2.3-9.9 7.65-6.64-10.09-.89-3.95-9.31-3.95 9.25-10.09.89 7.65 6.66-2.3 9.88Zm-3.09 1.65 2.44-10.56-8.16-7.13c-.2-.18-.35-.38-.46-.59-.11-.22-.16-.42-.16-.63 0-.41.14-.79.43-1.14.29-.34.67-.53 1.14-.55l10.8-.96 4.18-9.96c.13-.34.34-.59.64-.76.3-.17.6-.25.91-.25s.62.08.93.25c.31.17.53.42.66.76l4.18 9.96 10.8.96c.48.02.86.21 1.15.55.29.34.44.72.44 1.13 0 .22-.06.44-.18.65-.12.21-.27.4-.47.58l-8.16 7.13 2.47 10.56c.03.09.05.21.05.36 0 .48-.17.89-.51 1.22-.34.33-.73.49-1.16.49-.09 0-.4-.09-.93-.27l-9.26-5.59-9.26 5.59c-.14.08-.29.14-.46.19-.16.05-.31.08-.44.08-.5 0-.94-.21-1.31-.62-.37-.41-.48-.9-.32-1.45Z"/></g></svg>'
|
| 224 |
+
const run_btn = document.querySelector("#run_btn")
|
| 225 |
+
run_btn.innerHTML =
|
| 226 |
+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M29.27 43.84V33.13l-6.01-5.57-1.89 8.38c-.1.4-.31.7-.64.92-.33.21-.69.28-1.08.22L9.48 34.99c-.28-.06-.51-.21-.69-.46s-.24-.54-.19-.86c.05-.3.21-.53.48-.68s.54-.2.82-.15l8.99 1.79 3.86-19.69-5.88 2.67v5.52c0 .33-.11.6-.33.82-.22.22-.5.33-.83.33-.33 0-.61-.11-.82-.33-.22-.22-.33-.5-.33-.82V17c0-.3.08-.58.25-.82.17-.24.38-.43.65-.55l7.42-3.07c.94-.41 1.62-.67 2.04-.78.42-.11.83-.17 1.22-.17.6 0 1.14.13 1.61.4.47.27.88.66 1.21 1.17l2.12 3.37c.79 1.27 1.85 2.4 3.16 3.39 1.31.99 2.81 1.62 4.5 1.91.33.06.61.2.83.42.23.22.34.49.34.8s-.11.6-.34.82c-.23.22-.49.31-.81.27-1.84-.22-3.58-.87-5.2-1.96-1.62-1.09-3.12-2.68-4.49-4.79l-2.09 9.07 4.11 3.88c.16.14.28.31.36.49.08.19.13.38.13.57v12.42c0 .33-.11.6-.34.82-.23.22-.5.33-.82.33s-.61-.11-.82-.33c-.22-.22-.33-.5-.33-.82Zm-.06-34.83c-.97 0-1.8-.34-2.48-1.02-.68-.68-1.03-1.51-1.03-2.48s.34-1.8 1.02-2.48C27.4 2.35 28.23 2 29.2 2s1.8.34 2.48 1.02c.68.68 1.03 1.51 1.03 2.48s-.34 1.8-1.02 2.48c-.68.68-1.51 1.03-2.48 1.03Z"/></g></svg>'
|
| 227 |
+
|
| 228 |
+
// switch_width_height.innerHTML =
|
| 229 |
+
// '<svg xmlns="http://www.w3.org/2000/svg" class="portrait" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M33.75 22.5V6.01c0-1.84-1.5-3.34-3.34-3.34H5.01c-1.84 0-3.34 1.5-3.34 3.34V22.5c0 1.84 1.5 3.34 3.34 3.34h25.4c1.84 0 3.34-1.5 3.34-3.34Zm-29.41 0V6.01c0-.37.3-.67.67-.67h25.4c.37 0 .67.3.67.67V22.5c0 .37-.3.67-.67.67H5.01a.67.67 0 0 1-.67-.67Z"/><path d="M39.65 15.1c-.41-.72-1.33-.97-2.05-.56s-.97 1.33-.56 2.05C38.32 18.84 39 21.4 39 24c0 8.27-6.73 15-15 15-5.2 0-9.91-2.61-12.68-7H16c.83 0 1.5-.67 1.5-1.5S16.83 29 16 29H7.5c-.83 0-1.5.67-1.5 1.5V39c0 .83.67 1.5 1.5 1.5S9 39.83 9 39v-5.06C12.35 39 17.9 42 24 42c9.93 0 18-8.07 18-18 0-3.12-.81-6.2-2.35-8.9Z"/></g></svg>'
|
| 230 |
+
|
| 231 |
+
const switch_width_height_inner = document.createElement("div")
|
| 232 |
+
switch_width_height_inner.id = "switch_width_height_inner"
|
| 233 |
+
switch_width_height_inner.setAttribute("data-aspect-ratio", "9-16")
|
| 234 |
+
switch_width_height_inner.className = "hochformat"
|
| 235 |
+
switch_width_height.append(switch_width_height_inner)
|
| 236 |
+
const switch_width_height_btn_inner = document.querySelector("div#switch_width_height_inner")
|
| 237 |
+
|
| 238 |
+
switch_width_height.addEventListener("click", () => {
|
| 239 |
+
//switch_width_height_btn_inner.className = document.querySelector("#image_ratio_buttons > span").textContent.toLocaleLowerCase()
|
| 240 |
+
})
|
| 241 |
+
|
| 242 |
+
switch_ratio_btns.forEach((_) => {
|
| 243 |
+
_.querySelector("input").addEventListener("click", (e) => {
|
| 244 |
+
switch_width_height_btn_inner.setAttribute("data-aspect-ratio", e.target.value.replace(":", "-").trim())
|
| 245 |
+
})
|
| 246 |
+
})
|
| 247 |
+
|
| 248 |
+
onImageRatioButtonsChange(() => {
|
| 249 |
+
switch_width_height_btn_inner.className = document.querySelector("#image_ratio_buttons > span").textContent.toLocaleLowerCase()
|
| 250 |
+
const selected_ratio = document.querySelector("#image_ratio_buttons label.selected input").value.replace(":", "-").trim()
|
| 251 |
+
if (switch_width_height_btn_inner.getAttribute("data-aspect-ratio") != selected_ratio) {
|
| 252 |
+
switch_width_height_btn_inner.setAttribute("data-aspect-ratio", selected_ratio)
|
| 253 |
+
}
|
| 254 |
+
})
|
| 255 |
+
|
| 256 |
+
// MARK: Element-Ready function
|
| 257 |
+
function elementReady(selector) {
|
| 258 |
+
return new Promise((resolve, reject) => {
|
| 259 |
+
const el = document.querySelector(selector)
|
| 260 |
+
if (el) {
|
| 261 |
+
resolve(el)
|
| 262 |
+
}
|
| 263 |
+
|
| 264 |
+
new MutationObserver((mutationRecords, observer) => {
|
| 265 |
+
Array.from(document.querySelectorAll(selector)).forEach((element) => {
|
| 266 |
+
resolve(element)
|
| 267 |
+
observer.disconnect()
|
| 268 |
+
})
|
| 269 |
+
}).observe(document.documentElement, {
|
| 270 |
+
childList: true,
|
| 271 |
+
subtree: true,
|
| 272 |
+
})
|
| 273 |
+
})
|
| 274 |
+
}
|
| 275 |
+
|
| 276 |
+
// MARK: Mobile Check
|
| 277 |
+
function istMobile() {
|
| 278 |
+
// Überprüfen, ob das Gerät ein Touchscreen hat
|
| 279 |
+
if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
|
| 280 |
+
gradioContainer.classList.add("blur-container")
|
| 281 |
+
body.style.setProperty("--blur-value", "12px")
|
| 282 |
+
gradioApp.style.height = "calc(100vh - 120px)"
|
| 283 |
+
alertModalElem.style.display = ""
|
| 284 |
+
alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
|
| 285 |
+
} else if (window.innerWidth < 1024) {
|
| 286 |
+
gradioContainer.classList.add("blur-container")
|
| 287 |
+
body.style.setProperty("--blur-value", "12px")
|
| 288 |
+
gradioApp.style.height = "calc(100vh - 120px)"
|
| 289 |
+
alertModalElem.style.display = ""
|
| 290 |
+
alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
|
| 291 |
+
} else {
|
| 292 |
+
gradioContainer.classList.remove("blur-container")
|
| 293 |
+
body.style.setProperty("--blur-value", "0px")
|
| 294 |
+
gradioApp.style.height = ""
|
| 295 |
+
alertModalElem.style.display = "none"
|
| 296 |
+
alertModalElemSpan.textContent = ""
|
| 297 |
+
}
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
// MARK: Event Listeners
|
| 301 |
+
window.addEventListener("resize", () => {
|
| 302 |
+
console.log("Event Window resize.")
|
| 303 |
+
istMobile()
|
| 304 |
+
})
|
| 305 |
+
|
| 306 |
+
elementReady("body > gradio-app > div.gradio-container").then((element) => {
|
| 307 |
+
console.log("Element exist: " + element)
|
| 308 |
+
istMobile()
|
| 309 |
+
})
|
| 310 |
+
|
| 311 |
+
return "Custom Gradio JS"
|
| 312 |
+
}
|