24. Sept. 2024, 22:12

_res/_custom.js

@@ -66,39 +66,6 @@ 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")
@@ -146,12 +113,44 @@ function gradioCustomJS() {
 	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")
+
+	// 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", 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}")`)
+			}, 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: SVGs
 	random_prompt_btn.innerHTML =
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M42.15 9.85C41.58 9.28 40.9 9 40.12 9H7.88c-.78 0-1.46.28-2.03.85S5 11.1 5 11.88v24.23c0 .78.28 1.46.85 2.03s1.25.85 2.03.85h32.23c.78 0 1.46-.28 2.03-.85s.85-1.25.85-2.03V11.88c0-.78-.28-1.46-.85-2.03ZM13.66 30.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Z"/></g></svg>'
 	const enhance_prompt_btn = document.querySelector("#enhance_prompt_btn")