function gradioColorChange() {
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)
})
document.querySelector("body").style.setProperty("--primary-700", "rgb(14, 116, 144)")
document.querySelector("body").style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-700) 5%, white)")
document.querySelector("body").style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-700) 10%, white)")
document.querySelector("body").style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-700) 20%, white)")
document.querySelector("body").style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-700) 60%, white)")
document.querySelector("body").style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-700) 70%, white)")
document.querySelector("body").style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-700) 80%, white)")
document.querySelector("body").style.setProperty("--primary-600", "color-mix(in srgb, var(--primary-700) 90%, white)")
document.querySelector("body").style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-700) 70%, black)")
document.querySelector("body").style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-700) 80%, black)")
document.querySelector("body").style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-700) 90%, black)")
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 "Animation created"
}