24. Sept. 2024, 22:17

_res/_custom.js

@@ -69,6 +69,8 @@ function gradioCustomJS() {
 	// 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")
@@ -126,28 +128,27 @@ function gradioCustomJS() {
 	}
 
 	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"
+		console.log("changed: " + dominantColorField.value)
+		if (dominantColorField.value.match(/^rgb\((\d{1,3}),(\s\d{1,3}),(\s\d{1,3})\)$/) && outputImageElem.src) {
+			outputImageElem.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
+				usedColor = dominantColorField.value
 				body.style.setProperty("--primary-600", usedColor)
 				body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
-				document.querySelector("gradio-app").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}")`)
+				gradioApp.classList.add("has-bg-image")
+				body.style.setProperty("--bg-image-path", `url("${outputImageElem.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 = ""
+				gradioApp.style.opacity = "1"
+				outputImageElem.style.opacity = "1"
+				dominantColorField.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: SVGs