Upload 16 files

_res/_custom.css

@@ -1,300 +1,280 @@
-/* :root {
-    --primary-700: rgb(67, 56, 202);
-    --primary-50: color-mix(in srgb, var(--primary-700) 5%, white);
-    --primary-100: color-mix(in srgb, var(--primary-700) 10%, white);
-    --primary-200: color-mix(in srgb, var(--primary-700) 20%, white);
-    --primary-300: color-mix(in srgb, var(--primary-700) 60%, white);
-    --primary-400: color-mix(in srgb, var(--primary-700) 70%, white);
-    --primary-500: color-mix(in srgb, var(--primary-700) 80%, white);
-    --primary-600: color-mix(in srgb, var(--primary-700) 90%, white);
-    --primary-800: color-mix(in srgb, var(--primary-700) 70%, black);
-    --primary-900: color-mix(in srgb, var(--primary-700) 80%, black);
-    --primary-950: color-mix(in srgb, var(--primary-700) 90%, black);
-}
-
-.dark {
-    --primary-700: rgb(67, 56, 202);
-    --primary-50: color-mix(in srgb, var(--primary-700) 5%, white);
-    --primary-100: color-mix(in srgb, var(--primary-700) 10%, white);
-    --primary-200: color-mix(in srgb, var(--primary-700) 20%, white);
-    --primary-300: color-mix(in srgb, var(--primary-700) 60%, white);
-    --primary-400: color-mix(in srgb, var(--primary-700) 70%, white);
-    --primary-500: color-mix(in srgb, var(--primary-700) 80%, white);
-    --primary-600: color-mix(in srgb, var(--primary-700) 90%, white);
-    --primary-800: color-mix(in srgb, var(--primary-700) 70%, black);
-    --primary-900: color-mix(in srgb, var(--primary-700) 80%, black);
-    --primary-950: color-mix(in srgb, var(--primary-700) 90%, black);
-} */
-
-/* width */
-::-webkit-scrollbar {
-    width: 0px;
-}
-
-body::-webkit-scrollbar {
-    width: 8px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-    background: var(--neutral-900);
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-    background: var(--primary-600);
-    border-radius: 3px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-    background: var(--primary-800);
-}
-
-body {
-    min-height: 101vh;
-}
-
-body>gradio-app {
-    /* background: var(--primary-950);
-    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important; */
-    padding-top: 120px;
-    min-width: 900px;
-    transition: opacity 0.4s linear;
-    position: relative;
-}
-
-body>gradio-app::before {
-    position: absolute;
-    content: "";
-    background: var(--primary-950);
-    width: 100%;
-    height: 355px;
-    top: 0;
-    z-index: 0;
-}
-
-body>gradio-app.has-bg-image::before {
-    /* --bg-image-path: none; */
-    /* --bg-image-path: url("https://image.pollinations.ai/prompt/A%20midnight%20blue%20stallion%20gallops%20across%20a%20misty%2C%20moonlit%20meadow%2C%20its%20mane%20and%20tail%20flowing%20in%20the%20wind%20like%20a%20celestial%20river%2C%20as%20stars%20twinkle%20in%20the%20sky%20above%20-%20Expressionist%20Watercolor%20Painting?model=flux&width=1024&height=683&nologo=true&enhance=false&nofeed=true&seed=42"); */
-    background-image: var(--bg-image-path);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: blur(12px);
-
-}
-
-gradio-app .gradio-container {
-    max-width: 80% !important;
-}
-
-div.tabs>div.tab-nav>button.selected {
-    border-width: 0 !important;
-    background: var(--primary-600) !important;
-    color: var(--neutral-950);
-    font-weight: 600;
-}
-
-div.tabs>div.tab-nav {
-    border-bottom: none !important;
-    padding: 0 0.25rem 0 0.25rem !important;
-}
-
-div.tabs div.tabitem {
-    background-color: var(--neutral-900) !important;
-    border-width: 0 !important;
-    border-top: 8px solid var(--primary-600) !important;
-    border-radius: var(--container-radius) !important;
-}
-
-.top-description h1 {
-    color: var(--neutral-400);
-    font-size: 2rem;
-}
-
-.prompt-input textarea {
-    font-size: 1.05rem;
-    color: var(--neutral-300);
-}
-
-.ratio_buttons_wrapper {
-    display: flex !important;
-    flex-grow: 0 !important;
-    min-width: min(48px, 30%) !important;
-    flex: 1 1 0%;
-    flex-wrap: nowrap;
-}
-
-.image_size_selctor_wrapper {
-    flex-grow: 2 !important;
-    min-width: min(120px, 10%) !important;
-}
-
-.info-text-wrapper {
-    padding: calc(var(--spacing-xl) / 2) calc(var(--spacing-xl) + 2px);
-}
-
-span.info-text {
-    margin-bottom: var(--spacing-lg);
-    color: var(--block-info-text-color);
-    font-weight: var(--block-info-text-weight);
-    font-size: var(--block-info-text-size);
-    line-height: var(--line-sm);
-}
-
-.image-input-read-exfi {
-    max-height: 120px;
-}
-
-.image-input-read-exfi>button {
-    transform: scale(.8);
-}
-
-.image-ratio-buttons {
-    height: 120px;
-
-    & label {
-        width: calc(25% - calc(var(--spacing-xl) + 2px) * 2 / 4);
-        justify-content: center;
-        align-items: end;
-
-        & input {
-            display: none;
-        }
-    }
-
-    & label span {
-        margin-left: 0;
-    }
-}
-
-span.has-info+div {
-    margin-top: var(--spacing-lg);
-    margin-bottom: var(--spacing-lg);
-}
-
-.switch-ratio-btn {
-    /* max-width: 38px;
-    min-width: 38px !important;
-    height: 33px; */
-    --icon-ratio: 3/2;
-    aspect-ratio: 1;
-    min-width: 40px;
-    max-width: 120px;
-
-    & svg {
-        fill: var(--block-title-text-color);
-        width: 70%;
-        transition: transform 0.2s ease-in-out;
-    }
-
-    & svg.portrait {
-        transform: rotate(90deg) rotateX(180deg);
-    }
-}
-
-.switch-ratio-btn:hover {
-    & svg {
-        transform: rotate(40deg);
-    }
-
-    & svg.portrait {
-        transform: rotate(40deg) rotateX(180deg);
-    }
-}
-
-/* .image-height-selector {
-    & div.head {
-        justify-content: end;
-    }
-#component-5057 > label > input
-    & label {
-        display: none;
-    }
-} */
-
-.fade-bg *,
-.fade-bg .primary {
-    /* transition: background-color 0.8s ease-in-out;
-    transition: background 0.8s ease-in-out; */
-    /* transition: background-color 1.8s linear; */
-    /* transition: background 1.8s linear; */
-}
-
-.output-dominant-image-color {
-    display: none;
-}
-
-.image-info-wrapper {
-    transition: opacity 0.4s linear;
-    /* opacity: 0;
-    display: none; */
-}
-
-.tb-img-width input[type=text],
-.tb-img-height input[type=text],
-.tb-img-seed input[type=text] {
-    display: block;
-    position: relative;
-    outline: none !important;
-    box-shadow: var(--input-shadow);
-    border: var(--input-border-width) solid var(--input-border-color);
-    border-radius: var(--input-radius);
-    background: var(--input-background-fill);
-    padding: var(--size-2) var(--size-2);
-    height: var(--size-6);
-    color: var(--body-text-color);
-    font-size: var(--input-text-size);
-    line-height: var(--line-sm);
-    text-align: center;
-}
-
-#output_image>div.image-container>div.icon-buttons {
-
-
-    /* display: flex;
-    position: absolute;
-    top: var(--block-label-margin);
-    right: var(--block-label-margin);
-    align-items: center; */
-    & button,
-    a button {
-        display: inline-block;
-        position: relative;
-        z-index: var(--layer-4);
-        border: solid var(--block-title-border-width) var(--block-title-border-color);
-        border-radius: var(--block-title-radius);
-        background: var(--block-title-background-fill);
-        padding: var(--block-title-padding);
-        color: var(--block-title-text-color);
-        font-weight: var(--block-title-text-weight);
-        font-size: var(--block-title-text-size);
-        line-height: var(--line-sm);
-    }
-}
-
-.random-prompt-btn,
-.enhance-prompt-btn,
-.run-btn {
-    min-width: 110px;
-
-    & svg {
-        fill: var(--block-title-text-color);
-        width: 1.8rem;
-    }
-
-}
-
-.image-height-selector>label,
-.image-width-selector>label {
-    display: flex;
-    justify-content: space-between;
-
-    & input {
-        min-width: 100px;
-        width: 50%;
-        height: var(--size-9);
-    }
-
+/* :root {
+    --primary-700: rgb(67, 56, 202);
+    --primary-50: color-mix(in srgb, var(--primary-700) 5%, white);
+    --primary-100: color-mix(in srgb, var(--primary-700) 10%, white);
+    --primary-200: color-mix(in srgb, var(--primary-700) 20%, white);
+    --primary-300: color-mix(in srgb, var(--primary-700) 60%, white);
+    --primary-400: color-mix(in srgb, var(--primary-700) 70%, white);
+    --primary-500: color-mix(in srgb, var(--primary-700) 80%, white);
+    --primary-600: color-mix(in srgb, var(--primary-700) 90%, white);
+    --primary-800: color-mix(in srgb, var(--primary-700) 70%, black);
+    --primary-900: color-mix(in srgb, var(--primary-700) 80%, black);
+    --primary-950: color-mix(in srgb, var(--primary-700) 90%, black);
+}
+
+.dark {
+    --primary-700: rgb(67, 56, 202);
+    --primary-50: color-mix(in srgb, var(--primary-700) 5%, white);
+    --primary-100: color-mix(in srgb, var(--primary-700) 10%, white);
+    --primary-200: color-mix(in srgb, var(--primary-700) 20%, white);
+    --primary-300: color-mix(in srgb, var(--primary-700) 60%, white);
+    --primary-400: color-mix(in srgb, var(--primary-700) 70%, white);
+    --primary-500: color-mix(in srgb, var(--primary-700) 80%, white);
+    --primary-600: color-mix(in srgb, var(--primary-700) 90%, white);
+    --primary-800: color-mix(in srgb, var(--primary-700) 70%, black);
+    --primary-900: color-mix(in srgb, var(--primary-700) 80%, black);
+    --primary-950: color-mix(in srgb, var(--primary-700) 90%, black);
+} */
+
+/* width */
+::-webkit-scrollbar {
+    width: 0px;
+}
+
+body::-webkit-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: var(--neutral-900);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: var(--primary-600);
+    border-radius: 3px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-800);
+}
+
+body {
+    min-height: 101vh;
+}
+
+body>gradio-app {
+    /* background: var(--primary-950);
+    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important; */
+    padding-top: 120px;
+    min-width: 900px;
+    transition: opacity 0.4s linear;
+    position: relative;
+}
+
+body>gradio-app::before {
+    position: absolute;
+    content: "";
+    background: var(--primary-950);
+    width: 100%;
+    height: 355px;
+    top: 0;
+    z-index: 0;
+}
+
+body>gradio-app.has-bg-image::before {
+    /* --bg-image-path: none; */
+    /* --bg-image-path: url("https://image.pollinations.ai/prompt/A%20midnight%20blue%20stallion%20gallops%20across%20a%20misty%2C%20moonlit%20meadow%2C%20its%20mane%20and%20tail%20flowing%20in%20the%20wind%20like%20a%20celestial%20river%2C%20as%20stars%20twinkle%20in%20the%20sky%20above%20-%20Expressionist%20Watercolor%20Painting?model=flux&width=1024&height=683&nologo=true&enhance=false&nofeed=true&seed=42"); */
+    background-image: var(--bg-image-path);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(12px);
+
+}
+
+gradio-app .gradio-container {
+    max-width: 80% !important;
+}
+
+div.tabs>div.tab-nav>button.selected {
+    border-width: 0 !important;
+    background: var(--primary-600) !important;
+    color: var(--neutral-950);
+    font-weight: 600;
+}
+
+div.tabs>div.tab-nav {
+    border-bottom: none !important;
+    padding: 0 0.25rem 0 0.25rem !important;
+}
+
+div.tabs div.tabitem {
+    background-color: var(--neutral-900) !important;
+    border-width: 0 !important;
+    border-top: 8px solid var(--primary-600) !important;
+    border-radius: var(--container-radius) !important;
+}
+
+.top-description h1 {
+    color: var(--neutral-400);
+    font-size: 2rem;
+}
+
+.prompt-input textarea {
+    font-size: 1.05rem;
+    color: var(--neutral-300);
+}
+
+.ratio_buttons_wrapper {
+    display: flex !important;
+    flex-grow: 0 !important;
+    min-width: min(48px, 30%) !important;
+    flex: 1 1 0%;
+    flex-wrap: nowrap;
+}
+
+.image_size_selctor_wrapper {
+    flex-grow: 2 !important;
+    min-width: min(120px, 10%) !important;
+}
+
+.info-text-wrapper {
+    padding: calc(var(--spacing-xl) / 2) calc(var(--spacing-xl) + 2px);
+}
+
+span.info-text {
+    margin-bottom: var(--spacing-lg);
+    color: var(--block-info-text-color);
+    font-weight: var(--block-info-text-weight);
+    font-size: var(--block-info-text-size);
+    line-height: var(--line-sm);
+}
+
+.image-input-read-exfi {
+    max-height: 120px;
+}
+
+.image-input-read-exfi>button {
+    transform: scale(.8);
+}
+
+.image-ratio-buttons {
+    height: 120px;
+
+    & label {
+        width: calc(25% - calc(var(--spacing-xl) + 2px) * 2 / 4);
+        justify-content: center;
+        align-items: end;
+
+        & input {
+            display: none;
+        }
+    }
+
+    & label span {
+        margin-left: 0;
+    }
+}
+
+span.has-info+div {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.switch-ratio-btn {
+    /* max-width: 38px;
+    min-width: 38px !important;
+    height: 33px; */
+    --icon-ratio: 3/2;
+    aspect-ratio: 1;
+    min-width: 40px;
+    max-width: 120px;
+
+    & svg {
+        fill: var(--block-title-text-color);
+        width: 70%;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    & svg.portrait {
+        transform: rotate(90deg) rotateX(180deg);
+    }
+}
+
+.switch-ratio-btn:hover {
+    & svg {
+        transform: rotate(40deg);
+    }
+
+    & svg.portrait {
+        transform: rotate(40deg) rotateX(180deg);
+    }
+}
+
+.output-dominant-image-color {
+    display: none;
+}
+
+.image-info-wrapper {
+    transition: opacity 0.4s linear;
+}
+
+.tb-img-width input[type=text],
+.tb-img-height input[type=text],
+.tb-img-seed input[type=text] {
+    display: block;
+    position: relative;
+    outline: none !important;
+    box-shadow: var(--input-shadow);
+    border: var(--input-border-width) solid var(--input-border-color);
+    border-radius: var(--input-radius);
+    background: var(--input-background-fill);
+    padding: var(--size-2) var(--size-2);
+    height: var(--size-6);
+    color: var(--body-text-color);
+    font-size: var(--input-text-size);
+    line-height: var(--line-sm);
+    text-align: center;
+}
+
+#output_image>div.image-container>div.icon-buttons {
+
+
+    /* display: flex;
+    position: absolute;
+    top: var(--block-label-margin);
+    right: var(--block-label-margin);
+    align-items: center; */
+    & button,
+    a button {
+        display: inline-block;
+        position: relative;
+        z-index: var(--layer-4);
+        border: solid var(--block-title-border-width) var(--block-title-border-color);
+        border-radius: var(--block-title-radius);
+        background: var(--block-title-background-fill);
+        padding: var(--block-title-padding);
+        color: var(--block-title-text-color);
+        font-weight: var(--block-title-text-weight);
+        font-size: var(--block-title-text-size);
+        line-height: var(--line-sm);
+    }
+}
+
+.random-prompt-btn,
+.enhance-prompt-btn,
+.run-btn {
+    min-width: 110px;
+
+    & svg {
+        fill: var(--block-title-text-color);
+        width: 1.8rem;
+    }
+
+}
+
+.image-height-selector>label,
+.image-width-selector>label {
+    display: flex;
+    justify-content: space-between;
+
+    & input {
+        min-width: 100px;
+        width: 50%;
+        height: var(--size-9);
+    }
+
 }

_res/_custom.js

@@ -1,112 +1,112 @@
-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 =
-		'<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")
-	enhance_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="m33.91 29.59 9.37-8.07h.38c.4.05.72.21.95.49.23.28.35.59.35.91 0 .18-.05.37-.14.55-.09.18-.22.35-.37.5l-7.55 6.48 2.31 10s.04.1.04.17v.14c0 .41-.14.73-.42.98-.28.24-.6.37-.97.37-.12 0-.24-.01-.37-.04s-.25-.07-.37-.13l-.4-.27-2.8-12.09Zm-4.95-15.31-3-7.1.16-.33c.1-.27.26-.47.5-.63.24-.15.49-.23.75-.23.24 0 .49.07.74.22s.43.36.55.65l3.25 7.67-2.95-.26ZM12.1 37.29l8.69-5.23 8.69 5.29-2.3-9.9 7.65-6.64-10.09-.89-3.95-9.31-3.95 9.25-10.09.89 7.65 6.66-2.3 9.88Zm-3.09 1.65 2.44-10.56-8.16-7.13c-.2-.18-.35-.38-.46-.59-.11-.22-.16-.42-.16-.63 0-.41.14-.79.43-1.14.29-.34.67-.53 1.14-.55l10.8-.96 4.18-9.96c.13-.34.34-.59.64-.76.3-.17.6-.25.91-.25s.62.08.93.25c.31.17.53.42.66.76l4.18 9.96 10.8.96c.48.02.86.21 1.15.55.29.34.44.72.44 1.13 0 .22-.06.44-.18.65-.12.21-.27.4-.47.58l-8.16 7.13 2.47 10.56c.03.09.05.21.05.36 0 .48-.17.89-.51 1.22-.34.33-.73.49-1.16.49-.09 0-.4-.09-.93-.27l-9.26-5.59-9.26 5.59c-.14.08-.29.14-.46.19-.16.05-.31.08-.44.08-.5 0-.94-.21-1.31-.62-.37-.41-.48-.9-.32-1.45Z"/></g></svg>'
-	const run_btn = document.querySelector("#run_btn")
-	run_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="M29.27 43.84V33.13l-6.01-5.57-1.89 8.38c-.1.4-.31.7-.64.92-.33.21-.69.28-1.08.22L9.48 34.99c-.28-.06-.51-.21-.69-.46s-.24-.54-.19-.86c.05-.3.21-.53.48-.68s.54-.2.82-.15l8.99 1.79 3.86-19.69-5.88 2.67v5.52c0 .33-.11.6-.33.82-.22.22-.5.33-.83.33-.33 0-.61-.11-.82-.33-.22-.22-.33-.5-.33-.82V17c0-.3.08-.58.25-.82.17-.24.38-.43.65-.55l7.42-3.07c.94-.41 1.62-.67 2.04-.78.42-.11.83-.17 1.22-.17.6 0 1.14.13 1.61.4.47.27.88.66 1.21 1.17l2.12 3.37c.79 1.27 1.85 2.4 3.16 3.39 1.31.99 2.81 1.62 4.5 1.91.33.06.61.2.83.42.23.22.34.49.34.8s-.11.6-.34.82c-.23.22-.49.31-.81.27-1.84-.22-3.58-.87-5.2-1.96-1.62-1.09-3.12-2.68-4.49-4.79l-2.09 9.07 4.11 3.88c.16.14.28.31.36.49.08.19.13.38.13.57v12.42c0 .33-.11.6-.34.82-.23.22-.5.33-.82.33s-.61-.11-.82-.33c-.22-.22-.33-.5-.33-.82Zm-.06-34.83c-.97 0-1.8-.34-2.48-1.02-.68-.68-1.03-1.51-1.03-2.48s.34-1.8 1.02-2.48C27.4 2.35 28.23 2 29.2 2s1.8.34 2.48 1.02c.68.68 1.03 1.51 1.03 2.48s-.34 1.8-1.02 2.48c-.68.68-1.51 1.03-2.48 1.03Z"/></g></svg>'
-
-	switch_width_height.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="M33.75 22.5V6.01c0-1.84-1.5-3.34-3.34-3.34H5.01c-1.84 0-3.34 1.5-3.34 3.34V22.5c0 1.84 1.5 3.34 3.34 3.34h25.4c1.84 0 3.34-1.5 3.34-3.34Zm-29.41 0V6.01c0-.37.3-.67.67-.67h25.4c.37 0 .67.3.67.67V22.5c0 .37-.3.67-.67.67H5.01a.67.67 0 0 1-.67-.67Z"/><path d="M39.65 15.1c-.41-.72-1.33-.97-2.05-.56s-.97 1.33-.56 2.05C38.32 18.84 39 21.4 39 24c0 8.27-6.73 15-15 15-5.2 0-9.91-2.61-12.68-7H16c.83 0 1.5-.67 1.5-1.5S16.83 29 16 29H7.5c-.83 0-1.5.67-1.5 1.5V39c0 .83.67 1.5 1.5 1.5S9 39.83 9 39v-5.06C12.35 39 17.9 42 24 42c9.93 0 18-8.07 18-18 0-3.12-.81-6.2-2.35-8.9Z"/></g></svg>'
-
-	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"
-}
+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 =
+		'<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")
+	enhance_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="m33.91 29.59 9.37-8.07h.38c.4.05.72.21.95.49.23.28.35.59.35.91 0 .18-.05.37-.14.55-.09.18-.22.35-.37.5l-7.55 6.48 2.31 10s.04.1.04.17v.14c0 .41-.14.73-.42.98-.28.24-.6.37-.97.37-.12 0-.24-.01-.37-.04s-.25-.07-.37-.13l-.4-.27-2.8-12.09Zm-4.95-15.31-3-7.1.16-.33c.1-.27.26-.47.5-.63.24-.15.49-.23.75-.23.24 0 .49.07.74.22s.43.36.55.65l3.25 7.67-2.95-.26ZM12.1 37.29l8.69-5.23 8.69 5.29-2.3-9.9 7.65-6.64-10.09-.89-3.95-9.31-3.95 9.25-10.09.89 7.65 6.66-2.3 9.88Zm-3.09 1.65 2.44-10.56-8.16-7.13c-.2-.18-.35-.38-.46-.59-.11-.22-.16-.42-.16-.63 0-.41.14-.79.43-1.14.29-.34.67-.53 1.14-.55l10.8-.96 4.18-9.96c.13-.34.34-.59.64-.76.3-.17.6-.25.91-.25s.62.08.93.25c.31.17.53.42.66.76l4.18 9.96 10.8.96c.48.02.86.21 1.15.55.29.34.44.72.44 1.13 0 .22-.06.44-.18.65-.12.21-.27.4-.47.58l-8.16 7.13 2.47 10.56c.03.09.05.21.05.36 0 .48-.17.89-.51 1.22-.34.33-.73.49-1.16.49-.09 0-.4-.09-.93-.27l-9.26-5.59-9.26 5.59c-.14.08-.29.14-.46.19-.16.05-.31.08-.44.08-.5 0-.94-.21-1.31-.62-.37-.41-.48-.9-.32-1.45Z"/></g></svg>'
+	const run_btn = document.querySelector("#run_btn")
+	run_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="M29.27 43.84V33.13l-6.01-5.57-1.89 8.38c-.1.4-.31.7-.64.92-.33.21-.69.28-1.08.22L9.48 34.99c-.28-.06-.51-.21-.69-.46s-.24-.54-.19-.86c.05-.3.21-.53.48-.68s.54-.2.82-.15l8.99 1.79 3.86-19.69-5.88 2.67v5.52c0 .33-.11.6-.33.82-.22.22-.5.33-.83.33-.33 0-.61-.11-.82-.33-.22-.22-.33-.5-.33-.82V17c0-.3.08-.58.25-.82.17-.24.38-.43.65-.55l7.42-3.07c.94-.41 1.62-.67 2.04-.78.42-.11.83-.17 1.22-.17.6 0 1.14.13 1.61.4.47.27.88.66 1.21 1.17l2.12 3.37c.79 1.27 1.85 2.4 3.16 3.39 1.31.99 2.81 1.62 4.5 1.91.33.06.61.2.83.42.23.22.34.49.34.8s-.11.6-.34.82c-.23.22-.49.31-.81.27-1.84-.22-3.58-.87-5.2-1.96-1.62-1.09-3.12-2.68-4.49-4.79l-2.09 9.07 4.11 3.88c.16.14.28.31.36.49.08.19.13.38.13.57v12.42c0 .33-.11.6-.34.82-.23.22-.5.33-.82.33s-.61-.11-.82-.33c-.22-.22-.33-.5-.33-.82Zm-.06-34.83c-.97 0-1.8-.34-2.48-1.02-.68-.68-1.03-1.51-1.03-2.48s.34-1.8 1.02-2.48C27.4 2.35 28.23 2 29.2 2s1.8.34 2.48 1.02c.68.68 1.03 1.51 1.03 2.48s-.34 1.8-1.02 2.48c-.68.68-1.51 1.03-2.48 1.03Z"/></g></svg>'
+
+	switch_width_height.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="M33.75 22.5V6.01c0-1.84-1.5-3.34-3.34-3.34H5.01c-1.84 0-3.34 1.5-3.34 3.34V22.5c0 1.84 1.5 3.34 3.34 3.34h25.4c1.84 0 3.34-1.5 3.34-3.34Zm-29.41 0V6.01c0-.37.3-.67.67-.67h25.4c.37 0 .67.3.67.67V22.5c0 .37-.3.67-.67.67H5.01a.67.67 0 0 1-.67-.67Z"/><path d="M39.65 15.1c-.41-.72-1.33-.97-2.05-.56s-.97 1.33-.56 2.05C38.32 18.84 39 21.4 39 24c0 8.27-6.73 15-15 15-5.2 0-9.91-2.61-12.68-7H16c.83 0 1.5-.67 1.5-1.5S16.83 29 16 29H7.5c-.83 0-1.5.67-1.5 1.5V39c0 .83.67 1.5 1.5 1.5S9 39.83 9 39v-5.06C12.35 39 17.9 42 24 42c9.93 0 18-8.07 18-18 0-3.12-.81-6.2-2.35-8.9Z"/></g></svg>'
+
+	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"
+}

_res/groq_systemmessage_prompt_enhance.json

@@ -1,4 +1,4 @@
-{
-	"role": "system",
-	"content": "Instruction Set for Image Prompt Diversification:\n\n1. Language Processing:\n   - If the prompt is not in English, translate it to English first.\n   - Consider incorporating multilingual elements to enhance global appeal.\n\n2. Prompt Analysis:\n   - Receive and analyze the original image prompt from the user.\n   - Identify core elements: main subject, setting, colors, lighting, mood, and any temporal aspects.\n   - Determine relevance of specific languages or cultures to the subject matter.\n\n3. Prompt Generation:\n   - Create one distinctive new prompt describing the same image from a different perspective.\n   - Maintain a clear, vivid description while using varied vocabulary and sentence structures.\n   - Avoid reusing adjectives, nouns, verbs, or phrases from the original prompt.\n\n4. Style and Artistic References:\n   - If a visual style or artist is referenced, expand with more details about the style or artist.\n   - If no style is given, suggest a fitting style typical for that type of image.\n\n5. Technical and Abstract Concepts:\n   - For technical content (e.g., spreadsheets, diagrams), rewrite into figurative prompts.\n   - Example: Transform a spreadsheet into an intricate isometric technical drawing representing the data.\n   - Provide guidance on visualizing abstract concepts or ideas.\n\n6. Temporal and Cultural Considerations:\n   - Incorporate historical or futuristic elements when appropriate.\n   - Ensure cultural sensitivity and diversity in representations.\n\n7. Emotional Depth:\n   - Emphasize emotional nuances and moods in the prompt.\n\n8. Interactive Elements:\n   - Suggest ways to imply movement or interaction in static images.\n\n9. Random Prompt Generation:\n   - When requested, create an evocative and surprising prompt within user constraints.\n   - Provide any unspecified details to complete the image concept.\n\n10. Output Format:\n    Respond only with the new prompt in the following format:\n    [detailed prompt] - [style artist medium art movement photo style]\n\nNote: Prioritize widely used words and popular online languages in multilingual elements."
-}
+{
+	"role": "system",
+	"content": "Instruction Set for Image Prompt Diversification:\n\n1. Language Processing:\n   - If the prompt is not in English, translate it to English first.\n   - Consider incorporating multilingual elements to enhance global appeal.\n\n2. Prompt Analysis:\n   - Receive and analyze the original image prompt from the user.\n   - Identify core elements: main subject, setting, colors, lighting, mood, and any temporal aspects.\n   - Determine relevance of specific languages or cultures to the subject matter.\n\n3. Prompt Generation:\n   - Create one distinctive new prompt describing the same image from a different perspective.\n   - Maintain a clear, vivid description while using varied vocabulary and sentence structures.\n   - Avoid reusing adjectives, nouns, verbs, or phrases from the original prompt.\n\n4. Style and Artistic References:\n   - If a visual style or artist is referenced, expand with more details about the style or artist.\n   - If no style is given, suggest a fitting style typical for that type of image.\n\n5. Technical and Abstract Concepts:\n   - For technical content (e.g., spreadsheets, diagrams), rewrite into figurative prompts.\n   - Example: Transform a spreadsheet into an intricate isometric technical drawing representing the data.\n   - Provide guidance on visualizing abstract concepts or ideas.\n\n6. Temporal and Cultural Considerations:\n   - Incorporate historical or futuristic elements when appropriate.\n   - Ensure cultural sensitivity and diversity in representations.\n\n7. Emotional Depth:\n   - Emphasize emotional nuances and moods in the prompt.\n\n8. Interactive Elements:\n   - Suggest ways to imply movement or interaction in static images.\n\n9. Random Prompt Generation:\n   - When requested, create an evocative and surprising prompt within user constraints.\n   - Provide any unspecified details to complete the image concept.\n\n10. Output Format:\n    Respond only with the new prompt in the following format:\n    [detailed prompt] - [style artist medium art movement photo style]\n\nNote: Prioritize widely used words and popular online languages in multilingual elements."
+}