function gradioCustomJS() {
console.log("gradioCustomJS Started")
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(() => {
document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
document.querySelector("gradio-app").classList.add("has-bg-image")
document.querySelector("body").style.setProperty("--bg-image-path", `url("${document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src}")`)
}, 400)
setTimeout(() => {
document.querySelector("gradio-app").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)
}
//document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
})
// 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 usedColor = "rgb(250, 179, 135)"
body.style.setProperty("--cat-rosewater", "rgb(245, 224, 220)")
body.style.setProperty("--cat-flamingo", "rgb(242, 205, 205)")
body.style.setProperty("--cat-pink", "rgb(245, 194, 231)")
body.style.setProperty("--cat-mauve", "rgb(203, 166, 247)")
body.style.setProperty("--cat-red", "rgb(243, 139, 168)")
body.style.setProperty("--cat-maroon", "rgb(235, 160, 172)")
body.style.setProperty("--cat-peach", "rgb(250, 179, 135)")
body.style.setProperty("--cat-yellow", "rgb(249, 226, 175)")
body.style.setProperty("--cat-green", "rgb(166, 227, 161)")
body.style.setProperty("--cat-teal", "rgb(148, 226, 213)")
body.style.setProperty("--cat-sky", "rgb(137, 220, 235)")
body.style.setProperty("--cat-sapphire", "rgb(116, 199, 236)")
body.style.setProperty("--cat-blue", "rgb(137, 180, 250)")
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) 60%, black)")
body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 70%, black)")
body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 80%, black)")
body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 90%, black)")
body.style.setProperty("--block-title-text-color", "var(--neutral-950)")
body.style.setProperty("--block-label-text-color", "var(--neutral-950)")
body.style.setProperty("--checkbox-label-text-color", "var(--neutral-950)")
body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
body.style.setProperty("--block-title-text-color", anpasseTextfarbe(usedColor))
body.style.setProperty("--block-label-text-color", anpasseTextfarbe(usedColor))
body.style.setProperty("--checkbox-label-text-color", anpasseTextfarbe(usedColor))
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 imageRatioBtns = document.querySelectorAll("#image_ratio_buttons > div label")
const width_selector = document.querySelector("#image_width_selector > label > input")
const hight_selector = document.querySelector("#image_height_selector > label > input")
const switch_width_height = document.querySelector("#switch_width_height")
const random_prompt_btn = document.querySelector("#random_prompt_btn")
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
// })
// })
return "Custom Gradio JS"
}