24. Sept. 2024, 22:10

_res/_custom.js

@@ -1,41 +1,6 @@
 function gradioCustomJS() {
 	console.log("gradioCustomJS Started")
 
-	let usedColor = "rgb(250, 179, 135)"
-
-	// 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
-				document.querySelector("body").style.setProperty("--primary-600", usedColor)
-				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+)\)$/)
@@ -68,6 +33,7 @@ function gradioCustomJS() {
 	const body = document.querySelector("body")
 	body.className = "dark"
 
+	let usedColor = "rgb(250, 179, 135)"
 	// Catppuccin colors
 	body.style.setProperty("--cat-rosewater", "rgb(245, 224, 220)")
 	body.style.setProperty("--cat-flamingo", "rgb(242, 205, 205)")
@@ -100,6 +66,39 @@ function gradioCustomJS() {
 	body.style.setProperty("--blur-value", "0px")
 	body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
 
+	// 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
+				document.querySelector("body").style.setProperty("--primary-600", usedColor)
+				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: Selectors & Elements
 	const gradioApp = document.querySelector("gradio-app")
 	const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container")