function gradioCustomJS() { console.log("gradioCustomJS Started") // MARK: berechne Helligkeit der Akzentfarbe function berechneHelligkeit(rgb) { const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) if (!match) { throw new Error("Ungültiges Farbformat") } const r = parseInt(match[1]) / 255 const g = parseInt(match[2]) / 255 const b = parseInt(match[3]) / 255 const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4) const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4) const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4) const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin return luminanz } // MARK: Textfarbe bestimmen function anpasseTextfarbe(farbe) { const luminanz = berechneHelligkeit(farbe) const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)" console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe) return textFarbe } const body = document.querySelector("body") body.className = "dark" // Catppuccin colors const rosewater = "245, 224, 220" const flamingo = "242, 205, 205" const pink = "245, 194, 231" const mauve = "203, 166, 247" const red = "243, 139, 168" const maroon = "235, 160, 172" const peach = "250, 179, 135" const yellow = "249, 226, 175" const green = "166, 227, 161" const teal = "148, 226, 213" const sky = "137, 220, 235" const sapphire = "116, 199, 236" const blue = "137, 180, 250" let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue] let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})` body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")") body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")") body.style.setProperty("--cat-pink", "rgb(" + pink + ")") body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")") body.style.setProperty("--cat-red", "rgb(" + red + ")") body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")") body.style.setProperty("--cat-peach", "rgb(" + peach + ")") body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")") body.style.setProperty("--cat-green", "rgb(" + green + ")") body.style.setProperty("--cat-teal", "rgb(" + teal + ")") body.style.setProperty("--cat-sky", "rgb(" + sky + ")") body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")") body.style.setProperty("--cat-blue", "rgb(" + blue + ")") body.style.setProperty("--primary-600", usedColor) body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)") body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)") body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)") body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)") body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)") body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)") body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)") body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)") body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)") body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)") body.style.setProperty("--button-primary-background-fill", "var(--primary-600)") body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)") body.style.setProperty("--blur-value", "0px") body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor)) // MARK: Selectors & Elements const gradioApp = document.querySelector("gradio-app") const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container") const dominantColorField = document.querySelector("#dominant_image_color > label > textarea") const outputImageElem = document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img") const alertModalElem = document.createElement("div") const alertModalElemP = document.createElement("p") const alertModalElemI = document.createElement("i") alertModalElemI.className = "fas fa-exclamation-circle" const alertModalElemSpan = document.createElement("span") alertModalElemSpan.id = "alertModalText" const alertModalElemButton = document.createElement("button") alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev" alertModalElemButton.id = "alertModalBtn" alertModalElemButton.textContent = "Ok" alertModalElemP.id = "alertModalP" alertModalElemP.append(alertModalElemI, alertModalElemSpan) alertModalElem.id = "alertModal" alertModalElem.style.display = "none" alertModalElem.append(alertModalElemP, alertModalElemButton) //alertModalElem.innerHTML = '

' gradioApp.appendChild(alertModalElem) alertModalElemButton.addEventListener("click", () => { oldText = alertModalElemSpan.textContent alertModalElemButton.disabled = true if (alertModalElemButton.textContent == "Noch mal?") { alertModalElemSpan.innerHTML = 'Na gut, noch mal.
Der "Ok" ... ne, der "Noch mal?" Button ändert nur diesen Text. 😉 In 10 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?' setTimeout(() => { alertModalElemSpan.textContent = oldText alertModalElemButton.disabled = false alertModalElemButton.textContent = "Noch mal?" }, 10000) } else if (alertModalElemButton.textContent == "Ok") { alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢
In 6 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?' setTimeout(() => { alertModalElemSpan.textContent = oldText alertModalElemButton.disabled = false alertModalElemButton.textContent = "Noch mal?" }, 6000) } }) const prompt_input = document.querySelector("#prompt_input") prompt_input.setAttribute("autocomplete", "off") prompt_input.setAttribute("autocorrect", "off") prompt_input.setAttribute("autocapitalize", "off") prompt_input.setAttribute("spellcheck", "false") const switch_width_height = document.querySelector("#switch_width_height") const random_prompt_btn = document.querySelector("#random_prompt_btn") // MARK: DOM Change Detection function onDomChange(callback) { const observer = new MutationObserver(callback) observer.observe(document.querySelector("#dominant_image_color"), { childList: true, subtree: true, }) } onDomChange(() => { console.log("changed: " + document.querySelector("#dominant_image_color > label > textarea").value) 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) { document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "0" document.querySelector("body > gradio-app > div").classList.add("fade-bg") document.querySelector("gradio-app").style.opacity = "0" setTimeout(() => { usedColor = document.querySelector("#dominant_image_color > label > textarea").value body.style.setProperty("--primary-600", document.querySelector("#dominant_image_color > label > textarea").value) body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(document.querySelector("#dominant_image_color > label > textarea").value)) gradioApp.classList.add("has-bg-image") body.style.setProperty("--bg-image-path", `url("${document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src}")`) }, 400) setTimeout(() => { gradioApp.style.opacity = "1" document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "1" document.querySelector("#dominant_image_color > label > textarea").value = "" }, 800) setTimeout(() => { //document.querySelector("body > gradio-app > div").classList.remove("fade-bg") }, 2000) } }) // MARK: SVGs winking_hand__emoji = '' random_prompt_btn.innerHTML = '' const enhance_prompt_btn = document.querySelector("#enhance_prompt_btn") enhance_prompt_btn.innerHTML = '' const run_btn = document.querySelector("#run_btn") run_btn.innerHTML = '' switch_width_height.innerHTML = '' switch_width_height.addEventListener("click", () => { switch_width_height.querySelector("svg").classList.toggle("portrait") switch_width_height.querySelector("svg").classList.toggle("landscape") // imageRatioBtns.forEach((_) => { // const ratio = _.querySelector("input").value // const [a, b] = ratio.split(":") // _.dataset.testid = `${b}:${a}-radio-label` // _.querySelector("input").value = `${b}:${a}` // _.querySelector("span").textContent = `${b}:${a}` // }) // const imageRatioBtnsLabel = document.querySelector("#image_ratio_buttons > span") // imageRatioBtnsLabel.textContent = imageRatioBtnsLabel.textContent === "Querformat" ? "Hochformat" : "Querformat" // const new_hight = width_selector.value // const new_width = hight_selector.value // width_selector.value = new_width // hight_selector.value = new_hight }) //document.querySelector("#image_ratio_buttons > div.wrap.svelte-1kzox3m > label") // imageRatioBtns.forEach((_) => { // _.querySelector("input").addEventListener("click", (e) => { // let set_width // let set_height // const clicked_on = e.target // console.log("Clicked Btn:", clicked_on.value) // const ratio = e.target.value // const [a, b] = ratio.split(":") // if (parseInt(a) > parseInt(b)) { // console.log("a: " + a + " > " + "b: " + b) // set_width = 1024 // set_height = Math.round(set_width * (b / a)) // } else if (parseInt(a) < parseInt(b)) { // console.log("a: " + a + " < " + "b: " + b) // set_height = 1024 // set_width = Math.round(set_height * (a / b)) // } else if (parseInt(a) == parseInt(b)) { // set_height = 1024 // set_width = 1024 // } // width_selector.value = set_width // hight_selector.value = set_height // }) // }) // MARK: Element-Ready function function elementReady(selector) { return new Promise((resolve, reject) => { const el = document.querySelector(selector) if (el) { resolve(el) } new MutationObserver((mutationRecords, observer) => { Array.from(document.querySelectorAll(selector)).forEach((element) => { resolve(element) observer.disconnect() }) }).observe(document.documentElement, { childList: true, subtree: true, }) }) } // MARK: Mobile Check function istMobile() { // Überprüfen, ob das Gerät ein Touchscreen hat if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) { gradioContainer.classList.add("blur-container") body.style.setProperty("--blur-value", "12px") gradioApp.style.height = "calc(100vh - 120px)" alertModalElem.style.display = "" alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus." } else if (window.innerWidth < 1024) { gradioContainer.classList.add("blur-container") body.style.setProperty("--blur-value", "12px") gradioApp.style.height = "calc(100vh - 120px)" alertModalElem.style.display = "" alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus." } else { gradioContainer.classList.remove("blur-container") body.style.setProperty("--blur-value", "0px") gradioApp.style.height = "" alertModalElem.style.display = "none" alertModalElemSpan.textContent = "" } } // MARK: Event Listeners window.addEventListener("resize", () => { console.log("Event Window resize.") istMobile() }) elementReady("body > gradio-app > div.gradio-container").then((element) => { console.log("Element exist: " + element) istMobile() }) return "Custom Gradio JS" }