Upload 57 files

_res/_custom.css

@@ -1,788 +1,764 @@
-@font-face {
-	font-family: "Geist Mono";
-	src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
-	font-weight: 100;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: "Geist Mono";
-	src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
-	font-weight: 300;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: "Geist Mono";
-	src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
-	font-weight: 400;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: "Geist Mono";
-	src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
-	font-weight: 600;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: "Geist Mono";
-	src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
-	font-weight: 700;
-	font-style: normal;
-}
-
-/* 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; */
-  
-  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: 60px;
-      /* min-width: 900px; */
-      transition: opacity 0.4s linear;
-      position: relative;
-  
-      & #alertModal {
-          position: absolute;
-          top: 250px;
-          left: 50%;
-          width: 400px;
-          max-width: 80vw !important;
-          min-height: 140px;
-          transform: translate(-50%, -50%);
-          padding: var(--size-4) var(--size-8);
-          background-color: var(--neutral-900) !important;
-  
-          border-top-width: 8px;
-          border-right-width: 1px;
-          border-bottom-width: 1px;
-          border-left-width: 1px;
-          border-top-style: solid;
-          border-right-style: solid;
-          border-bottom-style: solid;
-          border-left-style: solid;
-          border-top-color: var(--primary-600);
-          border-right-color: var(--primary-600);
-          border-bottom-color: var(--primary-600);
-          border-left-color: var(--primary-600);
-  
-          border-radius: var(--container-radius);
-  
-          & #alertModalP {
-              display: flex;
-              justify-content: center;
-  
-              & span {
-                  color: var(--neutral-50);
-                  margin-top: 0rem;
-                  line-height: 1.4;
-              }
-  
-              & svg {
-                  font-size: 4rem;
-                  margin-right: 1rem;
-                  color: var(--cat-red);
-                  fill: var(--cat-red);
-              }
-          }
-  
-          & button {
-              color: var(--text-color-by-luminance) !important;
-          }
-      }
-    
-    .md-header {
-    	padding: var(--size-2) var(--size-1);
-        
-        .flex-wrapper {
-            display: inline-flex !important;
-            width: 100% !important;
-            justify-content: center !important;
-            align-items: flex-end !important;
-        }
-    	& h1 {
-    		color: var(--primary-950) !important;
-            text-shadow: 
-        		var(--primary-600) 1px 1px 0px, 
-        		var(--primary-600) 1px -1px 0px, 
-        		var(--primary-600) -1px 1px 0px, 
-        		var(--primary-600) -1px -1px 0px, 
-        		var(--primary-600) 1px 0px 0px, 
-        		var(--primary-600) 0px 1px 0px, 
-        		var(--primary-600) -1px 0px 0px, 
-        		var(--primary-600) 0px -1px 0px;
-    	}
-    
-    	& p,
-    	span {
-    		color: var(--neutral-800) !important;
-    		line-height: 1.5 !important;
-    		font-size: 1.1rem !important;
-            text-shadow: 
-        		var(--primary-600) 1px 1px 0px, 
-        		var(--primary-600) 1px -1px 0px, 
-        		var(--primary-600) -1px 1px 0px, 
-        		var(--primary-600) -1px -1px 0px, 
-        		var(--primary-600) 1px 0px 0px, 
-        		var(--primary-600) 0px 1px 0px, 
-        		var(--primary-600) -1px 0px 0px, 
-        		var(--primary-600) 0px -1px 0px;
-    
-    		& i {
-    			display: inline-flex;
-    			align-items: center;
-    			justify-content: center;
-    
-    			& svg {
-    				font-size: inherit !important;
-    				width: 16px !important;
-    				height: 16px !important;
-    			}
-    		}
-    	}
-        p.errorinfo {
-          color: #e26c5a;
-          margin-top: 0.3rem;
-          margin-bottom: 0.3rem;
-          background: var(--text-color-by-luminance) !important;
-          padding: 0.25rem 0.5rem;
-          border: none;
-          border-radius: 0.4rem;
-          font-size: 0.9rem !important;
-          border: none !important;
-          max-width: 80%;
-      }
-    }
-  }
-}
-
-body>gradio-app::before {
-    position: absolute;
-    content: "";
-    background: var(--primary-800);
-    width: 100%;
-    height: 355px;
-    top: 0;
-    z-index: 0;
-    transition: filter 0.4s ease-out;
-    filter: blur(var(--blur-value));
-}
-
-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);
-
-}
-
-div.gradio-container {
-  font-family: "Geist Mono", sans-serif !important;
-  font-weight: 400;
-}
-
-@media screen and (min-width: 980px) {
-
-    div.gradio-container {
-        max-width: 80% !important;
-    }
-
-}
-
-div.tabs>div.tab-nav>button.selected {
-    border-width: 0 !important;
-    background: var(--primary-600) !important;
-    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 {
-    resize: none;
-}
-
-.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: 120px;
-    max-width: 120px;
-    display: flex;
-	justify-content: center;
-	align-items: center;
-
-    /*
-    & div#switch_width_height_inner {
-        fill: var(--text-color-by-luminance);
-        width: 70%;
-        transition: transform 0.2s ease-in-out;
-    }
-
-    & div#switch_width_height_inner.portrait {
-        transform: rotate(90deg) rotateX(180deg);
-    }
-    */
-
-    & #switch_width_height_inner {
-        width: 100px;
-        height: 100px;
-        transition: transform 0.2s ease-in-out, width 0.3s ease-in-out, height 0.38s ease-in-out 0.1s, background-image 0.3s ease-in-out;
-        border-radius: 0.4rem;
-        border: 4px solid var(--text-color-by-luminance);
-        /*background: transparent;*/
-        background-position: center;
-
-        & div {
-            width: calc(100% + 20px);
-        	height: calc(100% + 20px);
-        	margin-top: -10px;
-        	margin-left: -10px;
-            transition: background-image 0.3s ease-in-out;
-            background-position: center;
-        }
-    }
-
-    [data-aspect-ratio="16-9"] {
-        width: 90px !important;
-        height: 51px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/90x51px_16zu9.png");
-    }
-    [data-aspect-ratio="9-16"] {
-        width: 51px !important;
-        height: 90px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/51x90px_9zu16.png");
-    }
-    [data-aspect-ratio="4-3"] {
-        width: 90px !important;
-        height: 60px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/90x60px_4zu3.png");
-    }
-    [data-aspect-ratio="3-4"] {
-        width: 60px !important;
-        height: 90px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/60x90px_3zu4.png");
-    }
-    [data-aspect-ratio="3-2"] {
-        width: 90px !important;
-        height: 67px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/90x67px_3zu2.png");
-    }
-    [data-aspect-ratio="2-3"] {
-        width: 67px !important;
-        height: 90px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/67x90px_2zu3.png");
-    }
-    [data-aspect-ratio="1-1"] {
-        width: 70px !important;
-        height: 70px !important;
-        background-image: url("file=_res/assets/ratio_preview_bgs/70x70px_1zu1.png");
-    }
-}
-
-.switch-ratio-btn:hover {
-    & #switch_width_height_inner.querformat {
-        transform: rotate(20deg);
-    }
-
-    & #switch_width_height_inner.hochformat {
-        transform: rotate(-20deg) !important;
-    }
-}
-
-.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 {
-    min-height: 400px;
-
-    &>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;
-    transition: background 0.2s ease-in-out;
-
-    & svg {
-        fill: var(--text-color-by-luminance);
-        width: 1.8rem;
-    }
-
-}
-
-button.secondary {
-    min-width: 110px;
-    transition: background 0.2s ease-in-out;
-
-    & svg {
-        transition: fill 0.2s ease-in-out;
-        fill: var(--primary-600);
-    }
-
-}
-
-button.secondary:hover {
-    min-width: 110px;
-
-    & svg {
-        fill: var(--text-color-by-luminance);
-    }
-
-}
-
-.image-height-selector>label,
-.image-width-selector>label {
-    display: flex;
-    justify-content: space-between;
-
-    & input {
-        min-width: 100px;
-        width: 50%;
-        height: var(--size-9);
-    }
-
-}
-
-
-div.gradio-container.blur-container {
-    filter: blur(12px);
-    pointer-events: none;
-}
-
-#image_seed:has(input[disabled].svelte-pc1gm4) {
-    position: relative;
-}
-
-#image_seed:has(input[disabled].svelte-pc1gm4)::after {
-	position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-	border-radius: var(--block-radius);
-	background: var(--block-background-fill);
-    opacity: 0.5;
-    cursor: not-allowed;
-    z-index: var(--layer-5);
-}
-
-/* MARK: Toggle Button Checkbox */
-/* INFO: gr.Checkbox elem_classes".toggle-btn" */
-
-.toggle-btn {
-	display: flex;
-	flex-direction: column-reverse;
-
-	&>div.wrap {
-		display: none;
-	}
-
-	&>div:not(.wrap) {
-		margin-top: var(--spacing-lg);
-		margin-bottom: 0;
-	}
-
-	&>label {
-		position: relative;
-		width: 57px;
-		height: 27px;
-		display: inline-block;
-		border-radius: 13px;
-		background: var(--neutral-700);
-		box-shadow: var(--shadow-inset);
-		transition: background-color 0.3s, cursor 0.3s;
-		border: solid 0.4px var(--border-color-primary);
-		cursor: pointer;
-
-		&>input[type="checkbox"] {
-			width: 0;
-			height: 0;
-			opacity: 0;
-		}
-
-		&>span {
-			position: absolute;
-			left: 60px;
-			height: 27px;
-			min-width: 140px;
-			line-height: 27px;
-		}
-	}
-
-	&>label:has(input[type="checkbox"])::after {
-		content: "";
-		position: absolute;
-		top: 3px;
-		left: 3px;
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		background: var(--neutral-900);
-		box-shadow: var(--shadow-inset);
-		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
-	}
-
-	&>label:has(input[type="checkbox"]:checked)::after {
-		content: "";
-		position: absolute;
-		background: var(--neutral-900);
-		opacity: 0.8;
-		left: 32px;
-	}
-
-	&>label:has(input[type="checkbox"]:checked) {
-		background: var(--primary-600);
-	}
-}
-
-
-/* MARK: Range Input */
-input[type=range].svelte-pc1gm4 {
-    accent-color: var(--slider-color);
-    background: var(--neutral-700) !important;
-    background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
-    background-size: 0% 100%;
-}
-
-input[type=range].svelte-pc1gm4::-webkit-slider-thumb {
-    background-color: var(--primary-600);
-    border-width: 0;
-}
-
-input[type=range].svelte-pc1gm4::-webkit-slider-thumb:hover {
-    background-color: var(--primary-500);
-}
-
-/* MARK: Text-Color Override */
-label.svelte-1b6s6s,
-label.svelte-9gxdi0,
-span.svelte-1gfkn6j,
-span.svelte-1gfkn6j,
-.primary.svelte-cmf5ev,
-label.selected.svelte-1k4wjf2,
-label.selected.svelte-1mhtq7j,
-label.svelte-1mhtq7j:hover,
-div.tabs>div.tab-nav>button,
-.md-header h1,
-.md-header p,
-.md-header span {
-    color: var(--text-color-by-luminance) !important;
-}
-
-/* MARK: Hide Progress */
-.hide-progress:has(.wrap.default.full) {
-    pointer-events: none;
-}
-
-.hide-progress:has(.wrap.default.full.hide) {
-    pointer-events: initial;
-}
-
-.hide-progress .wrap.default.full:not(.hide) {
-    display: none;
-}
-
-#run_btn {
-
-	svg,
-	dotlottie-player {
-		height: 28.8px;
-	}
-}
-
-
-/* KOFI CSS */
-img.kofiimg {
-    display: initial !important;
-    vertical-align: middle;
-    height: 13px !important;
-    width: 20px !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    border: none;
-    margin-top: 0;
-    margin-right: 5px !important;
-    margin-left: 0 !important;
-    margin-bottom: 3px !important;
-    content: url('https://storage.ko-fi.com/cdn/cup-border.png')
-}
-
-.kofiimg:after {
-    vertical-align: middle;
-    height: 25px;
-    padding-top: 0;
-    padding-bottom: 0;
-    border: none;
-    margin-top: 0;
-    margin-right: 6px;
-    margin-left: 0;
-    margin-bottom: 4px !important;
-    content: url('https://storage.ko-fi.com/cdn/whitelogo.svg')
-}
-
-.btn-container {
-    display: inline-block !important;
-    white-space: nowrap;
-    min-width: 230px;
-}
-
-span.kofitext {
-    color: var(--text-color-by-luminance) !important;
-    letter-spacing: -0.15px !important;
-    text-wrap: none;
-    vertical-align: middle;
-    line-height: 33px !important;
-    padding: 0;
-    text-align: center;
-    text-decoration: none !important;
-    text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);
-}
-
-.kofitext a {
-    color: #fff !important;
-    text-decoration: none:important;
-}
-
-.kofitext a:hover {
-    color: #fff !important;
-    text-decoration: none
-}
-
-a.kofi-button {
-    background: var(--primary-600) !important;
-    box-shadow: 0px -8px 16px -8px rgba(17, 17, 27, 0.7);
-    border: 4px solid var(--text-color-by-luminance) !important;
-
-    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
-    line-height: 36px !important;
-    min-width: 150px;
-    display: inline-block !important;
-    background-color: #29abe0;
-    padding: 2px 12px !important;
-    text-align: center !important;
-    border-radius: 7px;
-    color: #fff;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    vertical-align: middle;
-
-  border: 4px solid var(--text-color-by-luminance) !important;
-    font-family: 'Quicksand', Helvetica, Century Gothic, sans-serif !important;
-    text-decoration: none;
-    text-shadow: none;
-    font-weight: 700 !important;
-    font-size: 14px !important
-}
-
-a.kofi-button:visited {
-    color: #fff !important;
-    text-decoration: none !important
-}
-
-a.kofi-button:hover {
-    opacity: .85;
-    color: #f5f5f5 !important;
-    text-decoration: none !important
-}
-
-a.kofi-button:active {
-    color: #f5f5f5 !important;
-    text-decoration: none !important
-}
-
-.kofitext img.kofiimg {
-    height: 15px !important;
-    width: 22px !important;
-    display: initial;
-    animation: kofi-wiggle 3s infinite;
-}
-
-@keyframes kofi-wiggle {
-    0% {
-        transform: rotate(0) scale(1)
-    }
-
-    60% {
-        transform: rotate(0) scale(1)
-    }
-
-    75% {
-        transform: rotate(0) scale(1.12)
-    }
-
-    80% {
-        transform: rotate(0) scale(1.1)
-    }
-
-    84% {
-        transform: rotate(-10deg) scale(1.1)
-    }
-
-    88% {
-        transform: rotate(10deg) scale(1.1)
-    }
-
-    92% {
-        transform: rotate(-10deg) scale(1.1)
-    }
-
-    96% {
-        transform: rotate(10deg) scale(1.1)
-    }
-
-    100% {
-        transform: rotate(0) scale(1)
-    }
-}
-/* KOFI CSS END */
+@font-face {
+	font-family: "Geist Mono";
+	src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
+	font-weight: 100;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Geist Mono";
+	src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Geist Mono";
+	src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Geist Mono";
+	src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Geist Mono";
+	src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
+	font-weight: 700;
+	font-style: normal;
+}
+
+/* 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; */
+
+	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: 60px;
+		/* min-width: 900px; */
+		transition: opacity 0.4s linear;
+		position: relative;
+
+		& #alertModal {
+			position: absolute;
+			top: 250px;
+			left: 50%;
+			width: 400px;
+			max-width: 80vw !important;
+			min-height: 140px;
+			transform: translate(-50%, -50%);
+			padding: var(--size-4) var(--size-8);
+			background-color: var(--neutral-900) !important;
+
+			border-top-width: 8px;
+			border-right-width: 1px;
+			border-bottom-width: 1px;
+			border-left-width: 1px;
+			border-top-style: solid;
+			border-right-style: solid;
+			border-bottom-style: solid;
+			border-left-style: solid;
+			border-top-color: var(--primary-600);
+			border-right-color: var(--primary-600);
+			border-bottom-color: var(--primary-600);
+			border-left-color: var(--primary-600);
+
+			border-radius: var(--container-radius);
+
+			& #alertModalP {
+				display: flex;
+				justify-content: center;
+
+				& span {
+					color: var(--neutral-50);
+					margin-top: 0rem;
+					line-height: 1.4;
+				}
+
+				& svg {
+					font-size: 4rem;
+					margin-right: 1rem;
+					color: var(--cat-red);
+					fill: var(--cat-red);
+				}
+			}
+
+			& button {
+				color: var(--text-color-by-luminance) !important;
+			}
+		}
+
+		.md-header {
+			padding: var(--size-2) var(--size-1);
+
+			.flex-wrapper {
+				display: inline-flex !important;
+				width: 100% !important;
+				justify-content: center !important;
+				align-items: flex-end !important;
+			}
+			& h1 {
+				color: var(--primary-950) !important;
+				text-shadow: var(--primary-600) 1px 1px 0px, var(--primary-600) 1px -1px 0px, var(--primary-600) -1px 1px 0px, var(--primary-600) -1px -1px 0px, var(--primary-600) 1px 0px 0px, var(--primary-600) 0px 1px 0px, var(--primary-600) -1px 0px 0px, var(--primary-600) 0px -1px 0px;
+			}
+
+			& p,
+			span {
+				color: var(--neutral-800) !important;
+				line-height: 1.5 !important;
+				font-size: 1.1rem !important;
+				text-shadow: var(--primary-600) 1px 1px 0px, var(--primary-600) 1px -1px 0px, var(--primary-600) -1px 1px 0px, var(--primary-600) -1px -1px 0px, var(--primary-600) 1px 0px 0px, var(--primary-600) 0px 1px 0px, var(--primary-600) -1px 0px 0px, var(--primary-600) 0px -1px 0px;
+
+				& i {
+					display: inline-flex;
+					align-items: center;
+					justify-content: center;
+
+					& svg {
+						font-size: inherit !important;
+						width: 16px !important;
+						height: 16px !important;
+					}
+				}
+			}
+			p.errorinfo {
+				display: none !important;
+				color: #e26c5a;
+				margin-top: 0.3rem;
+				margin-bottom: 0.3rem;
+				background: var(--text-color-by-luminance) !important;
+				padding: 0.25rem 0.5rem;
+				border: none;
+				border-radius: 0.4rem;
+				font-size: 0.9rem !important;
+				border: none !important;
+				max-width: 80%;
+			}
+		}
+	}
+}
+
+body > gradio-app::before {
+	position: absolute;
+	content: "";
+	background: var(--primary-800);
+	width: 100%;
+	height: 355px;
+	top: 0;
+	z-index: 0;
+	transition: filter 0.4s ease-out;
+	filter: blur(var(--blur-value));
+}
+
+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);
+}
+
+div.gradio-container {
+	font-family: "Geist Mono", sans-serif !important;
+	font-weight: 400;
+}
+
+@media screen and (min-width: 980px) {
+	div.gradio-container {
+		max-width: 80% !important;
+	}
+}
+
+div.tabs > div.tab-nav > button.selected {
+	border-width: 0 !important;
+	background: var(--primary-600) !important;
+	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 {
+	resize: none;
+}
+
+.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(0.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: 120px;
+	max-width: 120px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	/*
+    & div#switch_width_height_inner {
+        fill: var(--text-color-by-luminance);
+        width: 70%;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    & div#switch_width_height_inner.portrait {
+        transform: rotate(90deg) rotateX(180deg);
+    }
+    */
+
+	& #switch_width_height_inner {
+		width: 100px;
+		height: 100px;
+		transition: transform 0.2s ease-in-out, width 0.3s ease-in-out, height 0.38s ease-in-out 0.1s, background-image 0.3s ease-in-out;
+		border-radius: 0.4rem;
+		border: 4px solid var(--text-color-by-luminance);
+		/*background: transparent;*/
+		background-position: center;
+
+		& div {
+			width: calc(100% + 20px);
+			height: calc(100% + 20px);
+			margin-top: -10px;
+			margin-left: -10px;
+			transition: background-image 0.3s ease-in-out;
+			background-position: center;
+		}
+	}
+
+	[data-aspect-ratio="16-9"] {
+		width: 90px !important;
+		height: 51px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/90x51px_16zu9.png");
+	}
+	[data-aspect-ratio="9-16"] {
+		width: 51px !important;
+		height: 90px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/51x90px_9zu16.png");
+	}
+	[data-aspect-ratio="4-3"] {
+		width: 90px !important;
+		height: 60px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/90x60px_4zu3.png");
+	}
+	[data-aspect-ratio="3-4"] {
+		width: 60px !important;
+		height: 90px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/60x90px_3zu4.png");
+	}
+	[data-aspect-ratio="3-2"] {
+		width: 90px !important;
+		height: 67px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/90x67px_3zu2.png");
+	}
+	[data-aspect-ratio="2-3"] {
+		width: 67px !important;
+		height: 90px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/67x90px_2zu3.png");
+	}
+	[data-aspect-ratio="1-1"] {
+		width: 70px !important;
+		height: 70px !important;
+		background-image: url("file=_res/assets/ratio_preview_bgs/70x70px_1zu1.png");
+	}
+}
+
+.switch-ratio-btn:hover {
+	& #switch_width_height_inner.querformat {
+		transform: rotate(20deg);
+	}
+
+	& #switch_width_height_inner.hochformat {
+		transform: rotate(-20deg) !important;
+	}
+}
+
+.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 {
+	min-height: 400px;
+
+	& > 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);
+		}
+	}
+}
+
+#gallery {
+	min-height: 800px;
+}
+
+.random-prompt-btn,
+.enhance-prompt-btn,
+.run-btn {
+	min-width: 110px;
+	transition: background 0.2s ease-in-out;
+
+	& svg {
+		fill: var(--text-color-by-luminance);
+		width: 1.8rem;
+	}
+}
+
+button.secondary {
+	min-width: 110px;
+	transition: background 0.2s ease-in-out;
+
+	& svg {
+		transition: fill 0.2s ease-in-out;
+		fill: var(--primary-600);
+	}
+}
+
+button.secondary:hover {
+	min-width: 110px;
+
+	& svg {
+		fill: var(--text-color-by-luminance);
+	}
+}
+
+.image-height-selector > label,
+.image-width-selector > label {
+	display: flex;
+	justify-content: space-between;
+
+	& input {
+		min-width: 100px;
+		width: 50%;
+		height: var(--size-9);
+	}
+}
+
+div.gradio-container.blur-container {
+	filter: blur(12px);
+	pointer-events: none;
+}
+
+#image_seed:has(input[disabled].svelte-pc1gm4) {
+	position: relative;
+}
+
+#image_seed:has(input[disabled].svelte-pc1gm4)::after {
+	position: absolute;
+	content: "";
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+	height: 100%;
+	border-radius: var(--block-radius);
+	background: var(--block-background-fill);
+	opacity: 0.5;
+	cursor: not-allowed;
+	z-index: var(--layer-5);
+}
+
+/* MARK: Toggle Button Checkbox */
+/* INFO: gr.Checkbox elem_classes".toggle-btn" */
+
+.toggle-btn {
+	display: flex;
+	flex-direction: column-reverse;
+
+	& > div.wrap {
+		display: none;
+	}
+
+	& > div:not(.wrap) {
+		margin-top: var(--spacing-lg);
+		margin-bottom: 0;
+	}
+
+	& > label {
+		position: relative;
+		width: 57px;
+		height: 27px;
+		display: inline-block;
+		border-radius: 13px;
+		background: var(--neutral-700);
+		box-shadow: var(--shadow-inset);
+		transition: background-color 0.3s, cursor 0.3s;
+		border: solid 0.4px var(--border-color-primary);
+		cursor: pointer;
+
+		& > input[type="checkbox"] {
+			width: 0;
+			height: 0;
+			opacity: 0;
+		}
+
+		& > span {
+			position: absolute;
+			left: 60px;
+			height: 27px;
+			min-width: 140px;
+			line-height: 27px;
+		}
+	}
+
+	& > label:has(input[type="checkbox"])::after {
+		content: "";
+		position: absolute;
+		top: 3px;
+		left: 3px;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: var(--neutral-900);
+		box-shadow: var(--shadow-inset);
+		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
+	}
+
+	& > label:has(input[type="checkbox"]:checked)::after {
+		content: "";
+		position: absolute;
+		background: var(--neutral-900);
+		opacity: 0.8;
+		left: 32px;
+	}
+
+	& > label:has(input[type="checkbox"]:checked) {
+		background: var(--primary-600);
+	}
+}
+
+/* MARK: Range Input */
+input[type="range"].svelte-pc1gm4 {
+	accent-color: var(--slider-color);
+	background: var(--neutral-700) !important;
+	background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
+	background-size: 0% 100%;
+}
+
+input[type="range"].svelte-pc1gm4::-webkit-slider-thumb {
+	background-color: var(--primary-600);
+	border-width: 0;
+}
+
+input[type="range"].svelte-pc1gm4::-webkit-slider-thumb:hover {
+	background-color: var(--primary-500);
+}
+
+/* MARK: Text-Color Override */
+label.svelte-1b6s6s,
+label.svelte-9gxdi0,
+span.svelte-1gfkn6j,
+span.svelte-1gfkn6j,
+.primary.svelte-cmf5ev,
+label.selected.svelte-1k4wjf2,
+label.selected.svelte-1mhtq7j,
+label.svelte-1mhtq7j:hover,
+div.tabs > div.tab-nav > button,
+.md-header h1,
+.md-header p,
+.md-header span {
+	color: var(--text-color-by-luminance) !important;
+}
+
+/* MARK: Hide Progress */
+.hide-progress:has(.wrap.default.full) {
+	pointer-events: none;
+}
+
+.hide-progress:has(.wrap.default.full.hide) {
+	pointer-events: initial;
+}
+
+.hide-progress .wrap.default.full:not(.hide) {
+	display: none;
+}
+
+#run_btn {
+	svg,
+	dotlottie-player {
+		height: 28.8px;
+	}
+}
+
+/* KOFI CSS */
+img.kofiimg {
+	display: initial !important;
+	vertical-align: middle;
+	height: 13px !important;
+	width: 20px !important;
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+	border: none;
+	margin-top: 0;
+	margin-right: 5px !important;
+	margin-left: 0 !important;
+	margin-bottom: 3px !important;
+	content: url("https://storage.ko-fi.com/cdn/cup-border.png");
+}
+
+.kofiimg:after {
+	vertical-align: middle;
+	height: 25px;
+	padding-top: 0;
+	padding-bottom: 0;
+	border: none;
+	margin-top: 0;
+	margin-right: 6px;
+	margin-left: 0;
+	margin-bottom: 4px !important;
+	content: url("https://storage.ko-fi.com/cdn/whitelogo.svg");
+}
+
+.btn-container {
+	display: inline-block !important;
+	white-space: nowrap;
+	min-width: 230px;
+}
+
+span.kofitext {
+	color: var(--text-color-by-luminance) !important;
+	letter-spacing: -0.15px !important;
+	text-wrap: none;
+	vertical-align: middle;
+	line-height: 33px !important;
+	padding: 0;
+	text-align: center;
+	text-decoration: none !important;
+	text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);
+}
+
+.kofitext a {
+	color: #fff !important;
+	text-decoration: none !important;
+}
+
+.kofitext a:hover {
+	color: #fff !important;
+	text-decoration: none;
+}
+
+a.kofi-button {
+	background: var(--primary-600) !important;
+	box-shadow: 0px -8px 16px -8px rgba(17, 17, 27, 0.7);
+	border: 4px solid var(--text-color-by-luminance) !important;
+
+	box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
+	line-height: 36px !important;
+	min-width: 150px;
+	display: inline-block !important;
+	background-color: #29abe0;
+	padding: 2px 12px !important;
+	text-align: center !important;
+	border-radius: 7px;
+	color: #fff;
+	cursor: pointer;
+	overflow-wrap: break-word;
+	vertical-align: middle;
+
+	border: 4px solid var(--text-color-by-luminance) !important;
+	font-family: "Quicksand", Helvetica, Century Gothic, sans-serif !important;
+	text-decoration: none;
+	text-shadow: none;
+	font-weight: 700 !important;
+	font-size: 14px !important;
+}
+
+a.kofi-button:visited {
+	color: #fff !important;
+	text-decoration: none !important;
+}
+
+a.kofi-button:hover {
+	opacity: 0.85;
+	color: #f5f5f5 !important;
+	text-decoration: none !important;
+}
+
+a.kofi-button:active {
+	color: #f5f5f5 !important;
+	text-decoration: none !important;
+}
+
+.kofitext img.kofiimg {
+	height: 15px !important;
+	width: 22px !important;
+	display: initial;
+	animation: kofi-wiggle 3s infinite;
+}
+
+@keyframes kofi-wiggle {
+	0% {
+		transform: rotate(0) scale(1);
+	}
+
+	60% {
+		transform: rotate(0) scale(1);
+	}
+
+	75% {
+		transform: rotate(0) scale(1.12);
+	}
+
+	80% {
+		transform: rotate(0) scale(1.1);
+	}
+
+	84% {
+		transform: rotate(-10deg) scale(1.1);
+	}
+
+	88% {
+		transform: rotate(10deg) scale(1.1);
+	}
+
+	92% {
+		transform: rotate(-10deg) scale(1.1);
+	}
+
+	96% {
+		transform: rotate(10deg) scale(1.1);
+	}
+
+	100% {
+		transform: rotate(0) scale(1);
+	}
+}
+/* KOFI CSS END */

_res/_custom.js

@@ -1,315 +1,315 @@
-function gradioCustomJS() {
-	console.log("gradioCustomJS Started")
-
-	// MARK: berechne Helligkeit der Akzentfarbe
-	function berechneHelligkeit(rgb) {
-		const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
-		if (!match) {
-			throw new Error("Ungültiges Farbformat")
-		}
-
-		const r = parseInt(match[1]) / 255
-		const g = parseInt(match[2]) / 255
-		const b = parseInt(match[3]) / 255
-
-		const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
-		const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
-		const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
-
-		const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin
-
-		return luminanz
-	}
-
-	// MARK: Textfarbe bestimmen
-	function anpasseTextfarbe(farbe) {
-		const luminanz = berechneHelligkeit(farbe)
-		const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
-		console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)
-
-		return textFarbe
-	}
-
-	const body = document.querySelector("body")
-	body.className = "dark"
-
-	// Catppuccin colors
-	const rosewater = "245, 224, 220"
-	const flamingo = "242, 205, 205"
-	const pink = "245, 194, 231"
-	const mauve = "203, 166, 247"
-	const red = "243, 139, 168"
-	const maroon = "235, 160, 172"
-	const peach = "250, 179, 135"
-	const yellow = "249, 226, 175"
-	const green = "166, 227, 161"
-	const teal = "148, 226, 213"
-	const sky = "137, 220, 235"
-	const sapphire = "116, 199, 236"
-	const blue = "137, 180, 250"
-
-	let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue]
-	let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
-
-	body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")")
-	body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")")
-	body.style.setProperty("--cat-pink", "rgb(" + pink + ")")
-	body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")")
-	body.style.setProperty("--cat-red", "rgb(" + red + ")")
-	body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")")
-	body.style.setProperty("--cat-peach", "rgb(" + peach + ")")
-	body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")")
-	body.style.setProperty("--cat-green", "rgb(" + green + ")")
-	body.style.setProperty("--cat-teal", "rgb(" + teal + ")")
-	body.style.setProperty("--cat-sky", "rgb(" + sky + ")")
-	body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")")
-	body.style.setProperty("--cat-blue", "rgb(" + blue + ")")
-
-	body.style.setProperty("--primary-600", usedColor)
-	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")
-	body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)")
-	body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)")
-	body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)")
-	body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)")
-	body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)")
-	body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)")
-	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)")
-	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)")
-	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)")
-
-	body.style.setProperty("--button-primary-background-fill", "var(--primary-600)")
-	body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)")
-	body.style.setProperty("--blur-value", "0px")
-	body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
-
-	// 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")
-	alertModalElemI.className = "fas fa-exclamation-circle"
-	const alertModalElemSpan = document.createElement("span")
-	alertModalElemSpan.id = "alertModalText"
-	const alertModalElemButton = document.createElement("button")
-	alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
-	alertModalElemButton.id = "alertModalBtn"
-	alertModalElemButton.textContent = "Ok"
-	alertModalElemP.id = "alertModalP"
-	alertModalElemP.append(alertModalElemI, alertModalElemSpan)
-	alertModalElem.id = "alertModal"
-	alertModalElem.style.display = "none"
-	alertModalElem.append(alertModalElemP, alertModalElemButton)
-	//alertModalElem.innerHTML = '<p></p>'
-	gradioApp.appendChild(alertModalElem)
-
-	alertModalElemButton.addEventListener("click", () => {
-		oldText = alertModalElemSpan.textContent
-		alertModalElemButton.disabled = true
-		if (alertModalElemButton.textContent == "Noch mal?") {
-			alertModalElemSpan.innerHTML = 'Na gut, noch mal. <br/>Der "Ok" ... ne, der "Noch mal?" Button ändert nur diesen Text. 😉 In 10 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
-			setTimeout(() => {
-				alertModalElemSpan.textContent = oldText
-				alertModalElemButton.disabled = false
-				alertModalElemButton.textContent = "Noch mal?"
-			}, 10000)
-		} else if (alertModalElemButton.textContent == "Ok") {
-			alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢<br/>In 6 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
-			setTimeout(() => {
-				alertModalElemSpan.textContent = oldText
-				alertModalElemButton.disabled = false
-				alertModalElemButton.textContent = "Noch mal?"
-			}, 6000)
-		}
-	})
-
-	const prompt_input = document.querySelector("#prompt_input")
-	prompt_input.setAttribute("autocomplete", "off")
-	prompt_input.setAttribute("autocorrect", "off")
-	prompt_input.setAttribute("autocapitalize", "off")
-	prompt_input.setAttribute("spellcheck", "false")
-
-	const switch_width_height = document.querySelector("#switch_width_height")
-	const random_prompt_btn = document.querySelector("#random_prompt_btn")
-	const switch_ratio_btns = document.querySelectorAll("#image_ratio_buttons label")
-
-	// MARK: DOM Change Detection
-	function onDominantImageColorChange(callback) {
-		const observer = new MutationObserver(callback)
-		observer.observe(document.querySelector("#dominant_image_color"), {
-			childList: true,
-			subtree: true,
-		})
-	}
-
-	function onImageRatioButtonsChange(callback) {
-		const observer = new MutationObserver(callback)
-		observer.observe(document.querySelector("#image_ratio_buttons"), {
-			childList: true,
-			subtree: true,
-		})
-	}
-
-	function onDomElemChange(selector) {
-		return new Promise((resolve) => {
-			const element = document.querySelector(selector)
-			if (!element) {
-				console.error(`Element nicht gefunden: ${selector}`)
-				return
-			}
-
-			const observer = new MutationObserver((mutations) => {
-				mutations.forEach((mutation) => {
-					if (mutation.type === "childList" || mutation.type === "attributes") {
-						resolve(element)
-					}
-				})
-			})
-
-			observer.observe(element, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-			})
-
-			// Wiederholt aufgerufen werden
-			function watch() {
-				observer.disconnect()
-				observer.observe(element, {
-					childList: true,
-					subtree: true,
-					attributes: true,
-				})
-				setTimeout(watch, 100)
-			}
-			watch()
-		})
-	}
-
-	onDominantImageColorChange(() => {
-		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", document.querySelector("#dominant_image_color > label > textarea").value)
-				body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(document.querySelector("#dominant_image_color > label > textarea").value))
-				gradioApp.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(() => {
-				gradioApp.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)
-		}
-	})
-
-	// MARK: SVGs
-	document.querySelector(".row-header i.winking-hand-emoji").innerHTML =
-		'<svg aria-hidden="true" style="height: 16px;" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 128 128"><style> @keyframes wink{0%, 60%, 100%{transform: rotate(0deg);}10%, 30%, 70%, 90%{transform: rotate(14deg);}20%, 80%{transform: rotate(-8deg);}40%{transform: rotate(-4deg);}50%{transform: rotate(10deg);}}</style><g style="animation: wink 3s ease-in-out infinite; transform-origin: 50% 50%;"><radialGradient id="a" cx="-779.868" cy="686.689" r="91.008" gradientTransform="scale(1 -1) rotate(45 506.867 1318.897)" gradientUnits="userSpaceOnUse"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><path fill="url(#a)" d="M59.53 107.44c-3.95-3.17-40.63-38.84-41.04-39.23-1.62-1.62-2.64-3.3-2.92-4.84-.29-1.6.2-3 1.5-4.3 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59l16.63 15.98c.29.28.67.42 1.04.42a1.494 1.494 0 0 0 1.07-2.54L19.13 46.25c-2.66-2.66-3.91-6.73-.75-9.89 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59l27.16 26.48c.29.28.67.43 1.05.43s.77-.15 1.06-.44c.58-.58.59-1.52.01-2.11L24.91 28.02c-1.51-1.51-2.42-3.32-2.58-5.08-.15-1.79.48-3.45 1.83-4.8 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.58L67.3 51.31c.29.28.67.43 1.05.43s.77-.15 1.06-.44c.58-.58.59-1.52.01-2.11L45.26 24.36c-1.52-1.52-2.43-3.32-2.58-5.08-.15-1.79.48-3.45 1.83-4.8 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59 8.86 8.7 31.99 31.45 32.77 32.29 2.97 2.05 3.57-1.05 3.72-3.06.17-2.34-2.51-10.51-.95-17.86 2.62-9.77 10.17-8.17 10.34-8.09 4.14 1.94 3.35 4.84 1.88 10.67l-.15 1.15c-1.54 7.62 9.04 30.2 9.82 31.89 4.15 9.08 8.93 27.49-6.9 43.32-17.35 17.35-38.83 8.46-45.38 1.91z"/><path fill="#eda600" d="M81.79 117.18c-10.64 0-19.69-5.09-23.26-8.62-3.21-2.62-23.47-22.18-39.97-38.19-.67-.65-1.06-1.02-1.1-1.07-1.87-1.87-3.03-3.82-3.36-5.66-.38-2.09.27-3.98 1.91-5.63 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03l16.61 15.96-26.56-27.42c-3.06-3.06-4.6-8.13-.73-11.99 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03L56.45 62.5 23.84 29.07c-1.74-1.74-2.81-3.87-3-5.99-.19-2.26.59-4.33 2.26-6 1.5-1.5 3.34-2.29 5.34-2.29 2.34 0 4.7 1.07 6.65 3.02l33.26 32.43-24.16-24.83c-1.75-1.75-2.82-3.88-3-6-.19-2.25.59-4.32 2.26-5.99 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03l7.21 7.07c12.85 12.6 23.59 23.15 24.74 24.33.56.45 1.29.62 1.6.47.2-.1.42-.56.38-1.53-.06-1.7-.3-3.81-.55-6.04-.5-4.48-1.02-9.12-.37-12.18 1.42-5.31 4.21-7.56 6.29-8.53 2.86-1.32 5.63-.86 6.16-.61 5.2 2.44 4.17 6.52 2.75 12.18l-.03.14-.16 1.17c-1.04 5.12 4.3 19.27 9.64 30.8l.08.16c3.57 7.8 10 27.81-7.2 45.01-7.91 7.89-16.47 10.58-24.19 10.58zM21.35 58.72c-1.18 0-2.3.49-3.22 1.41-.95.95-1.28 1.87-1.08 2.97.22 1.21 1.11 2.65 2.5 4.05.01.01.41.4 1.1 1.06 23.42 22.73 37.56 36.24 39.82 38.06l.12.11c5.52 5.52 26.03 15.32 43.26-1.91 15.87-15.87 9.9-34.4 6.59-41.64l-.07-.15c-3.44-7.42-11.26-25.42-9.87-32.6l.23-1.5c1.54-6.12 1.63-7.4-.98-8.66-.77-.14-6.29-.81-8.4 7.06-.53 2.51-.02 7.1.43 11.15.26 2.29.5 4.46.56 6.27.1 2.85-1.25 3.94-2.07 4.34-1.67.81-3.66.12-4.9-.92l-.13-.12c-.61-.66-15.12-14.89-24.72-24.31L53.3 16.3c-2.46-2.47-5.63-2.88-7.76-.75-1.04 1.04-1.51 2.26-1.4 3.61.12 1.41.88 2.88 2.15 4.15L70.5 48.14a3.012 3.012 0 0 1-.02 4.22c-1.11 1.11-3.07 1.13-4.21.03L32.98 19.94c-2.46-2.46-5.64-2.87-7.76-.74-1.04 1.04-1.51 2.26-1.4 3.61.13 1.41.89 2.89 2.15 4.14L58.6 60.41c1.15 1.16 1.14 3.06-.02 4.22-1.11 1.11-3.07 1.13-4.21.03L27.2 38.17c-2.46-2.48-5.64-2.88-7.76-.75-2.59 2.59-1.21 5.8.75 7.77l26.57 27.44a2.988 2.988 0 0 1-.03 4.2c-1.12 1.12-3.06 1.13-4.2.04L25.9 60.89c-1.4-1.41-3.01-2.17-4.55-2.17z"/><path fill="#eda600" d="M84.76 46.54c-5.49 11.21-4.78 26.9 3.46 39.49.93 1.7 2.52.87 1.71-.88-9.95-21.29.48-36.63.48-36.63l-5.65-1.98z"/><path fill="#b0bec5" d="M63.17 4.5c3.02-.79 6.24-.72 9.37.01 3.11.75 6.22 2.33 8.53 4.91 2.26 2.56 3.65 5.67 4.12 8.93.44 3.23.03 6.56-1.5 9.32-.18-3.1-.72-5.95-1.63-8.58-.47-1.31-1.02-2.56-1.69-3.74-.66-1.17-1.44-2.33-2.27-3.28-1.69-1.95-3.98-3.47-6.55-4.65-2.58-1.22-5.39-2.12-8.38-2.92z"/><path fill="#90a4ae" d="M64 13.98c1.67-1.06 3.76-1.28 5.73-.93 1.99.35 3.89 1.34 5.39 2.71 1.49 1.39 2.55 3.14 3.21 4.96.32.91.48 1.87.63 2.8.05.96.05 1.92-.1 2.88-.69-.73-1.23-1.46-1.74-2.17-.59-.67-1.05-1.38-1.58-2.03-1.04-1.29-2.05-2.46-3.14-3.5-1.12-1.01-2.3-1.9-3.67-2.67-1.36-.79-2.89-1.45-4.73-2.05z"/><path fill="#b0bec5" d="M6.83 77.34c1.41 2.76 2.88 5.32 4.59 7.58 1.7 2.26 3.65 4.18 5.92 5.43 1.1.61 2.41 1.14 3.69 1.54 1.29.41 2.63.69 4.01.88 2.76.34 5.66.28 8.73-.19-2.38 2.07-5.56 3.17-8.8 3.41-3.28.22-6.61-.49-9.59-2.17-3-1.71-5.2-4.43-6.58-7.32-1.38-2.91-2.12-6.04-1.97-9.16z"/><path fill="#90a4ae" d="M16.28 76.17c.97 1.68 1.93 3.03 2.98 4.21 1.04 1.18 2.16 2.15 3.38 3.03 1.24.85 2.6 1.6 4.08 2.35.74.38 1.53.68 2.31 1.12.81.35 1.63.72 2.49 1.25-.91.34-1.84.54-2.79.69-.94.04-1.91.09-2.87-.04-1.92-.26-3.84-.93-5.52-2.1-1.65-1.19-3.02-2.84-3.77-4.71-.76-1.86-.98-3.94-.29-5.8z"/></g></svg>'
-	document.querySelector(".row-header i.heart-beat-emoji").innerHTML =
-		'<svg xmlns="http://www.w3.org/2000/svg" style="height: 16px;" viewBox="0 0 512 512"><defs><style> @keyframes beat{0%{transform: scale(1);}5%{transform: scale(0.75);}20%{transform: scale(1);}30%{transform: scale(1);}35%{transform: scale(0.75);}50%{transform: scale(1);}55%{transform: scale(0.75);}70%{transform: scale(1);}}</style></defs><g style="animation: beat 2s ease-in-out infinite; transform-origin: 50% 50%;"><path fill="#bd0a0a" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></g></svg>'
-	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>'
-	document.querySelector("#run_btn").innerHTML = 
-      //'<dotlottie-player src="https://lottie.host/07f9842b-03a8-46dc-a45f-684d4cf57429/2amWXB96uz.lottie" background="transparent" speed="1" loop></dotlottie-player>'
-      '<dotlottie-player src="https://lottie.host/e3515e09-f615-49f0-a63d-a421b45ceb45/XEuKdFRH19.lottie" background="transparent" speed="1" loop></dotlottie-player>'
-  
-
-	const switch_width_height_inner = document.createElement("div")
-    //const switch_width_height_inner_image = document.createElement("div")
-    //switch_width_height_inner_image.id = "switch_width_height_inner_image"
-	switch_width_height_inner.id = "switch_width_height_inner"
-	switch_width_height_inner.setAttribute("data-aspect-ratio", "9-16")
-	switch_width_height_inner.className = "hochformat"
-	switch_width_height_inner.innerHTML = `<div></div>`
-	//switch_width_height_inner.append(switch_width_height_inner_image)
-	switch_width_height.append(switch_width_height_inner)
-	const switch_width_height_btn_inner = document.querySelector("div#switch_width_height_inner")
-
-	switch_width_height.addEventListener("click", () => {
-		//switch_width_height_btn_inner.className = document.querySelector("#image_ratio_buttons > span").textContent.toLocaleLowerCase()
-	})
-
-	switch_ratio_btns.forEach((_) => {
-		_.querySelector("input").addEventListener("click", (e) => {
-			switch_width_height_btn_inner.setAttribute("data-aspect-ratio", e.target.value.replace(":", "-").trim())
-		})
-	})
-
-	onImageRatioButtonsChange(() => {
-		switch_width_height_btn_inner.className = document.querySelector("#image_ratio_buttons > span").textContent.toLocaleLowerCase()
-		const selected_ratio = document.querySelector("#image_ratio_buttons label.selected input").value.replace(":", "-").trim()
-		if (switch_width_height_btn_inner.getAttribute("data-aspect-ratio") != selected_ratio) {
-			switch_width_height_btn_inner.setAttribute("data-aspect-ratio", selected_ratio)
-		}
-	})
-
-	// MARK: Element-Ready function
-	function elementReady(selector) {
-		return new Promise((resolve, reject) => {
-			const el = document.querySelector(selector)
-			if (el) {
-				resolve(el)
-			}
-
-			new MutationObserver((mutationRecords, observer) => {
-				Array.from(document.querySelectorAll(selector)).forEach((element) => {
-					resolve(element)
-					observer.disconnect()
-				})
-			}).observe(document.documentElement, {
-				childList: true,
-				subtree: true,
-			})
-		})
-	}
-
-	// MARK: Mobile Check
-	function istMobile() {
-		// Überprüfen, ob das Gerät ein Touchscreen hat
-		if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
-			gradioContainer.classList.add("blur-container")
-			body.style.setProperty("--blur-value", "12px")
-			gradioApp.style.height = "calc(100vh - 120px)"
-			alertModalElem.style.display = ""
-			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
-		} else if (window.innerWidth < 1024) {
-			gradioContainer.classList.add("blur-container")
-			body.style.setProperty("--blur-value", "12px")
-			gradioApp.style.height = "calc(100vh - 120px)"
-			alertModalElem.style.display = ""
-			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
-		} else {
-			gradioContainer.classList.remove("blur-container")
-			body.style.setProperty("--blur-value", "0px")
-			gradioApp.style.height = ""
-			alertModalElem.style.display = "none"
-			alertModalElemSpan.textContent = ""
-		}
-	}
-
-	// MARK: Event Listeners
-	window.addEventListener("resize", () => {
-		console.log("Event Window resize.")
-		istMobile()
-	})
-
-	elementReady("body > gradio-app > div.gradio-container").then((element) => {
-		console.log("Element exist: " + element)
-		istMobile()
-	})
-
-	return "Custom Gradio JS"
-}
+function gradioCustomJS() {
+	console.log("gradioCustomJS Started")
+
+	// MARK: berechne Helligkeit der Akzentfarbe
+	function berechneHelligkeit(rgb) {
+		const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+		if (!match) {
+			throw new Error("Ungültiges Farbformat")
+		}
+
+		const r = parseInt(match[1]) / 255
+		const g = parseInt(match[2]) / 255
+		const b = parseInt(match[3]) / 255
+
+		const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
+		const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
+		const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+
+		const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin
+
+		return luminanz
+	}
+
+	// MARK: Textfarbe bestimmen
+	function anpasseTextfarbe(farbe) {
+		const luminanz = berechneHelligkeit(farbe)
+		const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
+		console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)
+
+		return textFarbe
+	}
+
+	const body = document.querySelector("body")
+	body.className = "dark"
+
+	// Catppuccin colors
+	const rosewater = "245, 224, 220"
+	const flamingo = "242, 205, 205"
+	const pink = "245, 194, 231"
+	const mauve = "203, 166, 247"
+	const red = "243, 139, 168"
+	const maroon = "235, 160, 172"
+	const peach = "250, 179, 135"
+	const yellow = "249, 226, 175"
+	const green = "166, 227, 161"
+	const teal = "148, 226, 213"
+	const sky = "137, 220, 235"
+	const sapphire = "116, 199, 236"
+	const blue = "137, 180, 250"
+
+	let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue]
+	let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
+
+	body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")")
+	body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")")
+	body.style.setProperty("--cat-pink", "rgb(" + pink + ")")
+	body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")")
+	body.style.setProperty("--cat-red", "rgb(" + red + ")")
+	body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")")
+	body.style.setProperty("--cat-peach", "rgb(" + peach + ")")
+	body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")")
+	body.style.setProperty("--cat-green", "rgb(" + green + ")")
+	body.style.setProperty("--cat-teal", "rgb(" + teal + ")")
+	body.style.setProperty("--cat-sky", "rgb(" + sky + ")")
+	body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")")
+	body.style.setProperty("--cat-blue", "rgb(" + blue + ")")
+
+	body.style.setProperty("--primary-600", usedColor)
+	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")
+	body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)")
+	body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)")
+	body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)")
+	body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)")
+	body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)")
+	body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)")
+	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)")
+	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)")
+	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)")
+
+	body.style.setProperty("--button-primary-background-fill", "var(--primary-600)")
+	body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)")
+	body.style.setProperty("--blur-value", "0px")
+	body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
+
+	// 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")
+	alertModalElemI.className = "fas fa-exclamation-circle"
+	const alertModalElemSpan = document.createElement("span")
+	alertModalElemSpan.id = "alertModalText"
+	const alertModalElemButton = document.createElement("button")
+	alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
+	alertModalElemButton.id = "alertModalBtn"
+	alertModalElemButton.textContent = "Ok"
+	alertModalElemP.id = "alertModalP"
+	alertModalElemP.append(alertModalElemI, alertModalElemSpan)
+	alertModalElem.id = "alertModal"
+	alertModalElem.style.display = "none"
+	alertModalElem.append(alertModalElemP, alertModalElemButton)
+	//alertModalElem.innerHTML = '<p></p>'
+	gradioApp.appendChild(alertModalElem)
+
+	alertModalElemButton.addEventListener("click", () => {
+		oldText = alertModalElemSpan.textContent
+		alertModalElemButton.disabled = true
+		if (alertModalElemButton.textContent == "Noch mal?") {
+			alertModalElemSpan.innerHTML = 'Na gut, noch mal. <br/>Der "Ok" ... ne, der "Noch mal?" Button ändert nur diesen Text. 😉 In 10 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
+			setTimeout(() => {
+				alertModalElemSpan.textContent = oldText
+				alertModalElemButton.disabled = false
+				alertModalElemButton.textContent = "Noch mal?"
+			}, 10000)
+		} else if (alertModalElemButton.textContent == "Ok") {
+			alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢<br/>In 6 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
+			setTimeout(() => {
+				alertModalElemSpan.textContent = oldText
+				alertModalElemButton.disabled = false
+				alertModalElemButton.textContent = "Noch mal?"
+			}, 6000)
+		}
+	})
+
+	const prompt_input = document.querySelector("#prompt_input")
+	prompt_input.setAttribute("autocomplete", "off")
+	prompt_input.setAttribute("autocorrect", "off")
+	prompt_input.setAttribute("autocapitalize", "off")
+	prompt_input.setAttribute("spellcheck", "false")
+
+	const switch_width_height = document.querySelector("#switch_width_height")
+	const random_prompt_btn = document.querySelector("#random_prompt_btn")
+	const switch_ratio_btns = document.querySelectorAll("#image_ratio_buttons label")
+
+	// MARK: DOM Change Detection
+	function onDominantImageColorChange(callback) {
+		const observer = new MutationObserver(callback)
+		observer.observe(document.querySelector("#dominant_image_color"), {
+			childList: true,
+			subtree: true,
+		})
+	}
+
+	function onImageRatioButtonsChange(callback) {
+		const observer = new MutationObserver(callback)
+		observer.observe(document.querySelector("#image_ratio_buttons"), {
+			childList: true,
+			subtree: true,
+		})
+	}
+
+	function onDomElemChange(selector) {
+		return new Promise((resolve) => {
+			const element = document.querySelector(selector)
+			if (!element) {
+				console.error(`Element nicht gefunden: ${selector}`)
+				return
+			}
+
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					if (mutation.type === "childList" || mutation.type === "attributes") {
+						resolve(element)
+					}
+				})
+			})
+
+			observer.observe(element, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+			})
+
+			// Wiederholt aufgerufen werden
+			function watch() {
+				observer.disconnect()
+				observer.observe(element, {
+					childList: true,
+					subtree: true,
+					attributes: true,
+				})
+				setTimeout(watch, 100)
+			}
+			watch()
+		})
+	}
+
+	onDominantImageColorChange(() => {
+		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", document.querySelector("#dominant_image_color > label > textarea").value)
+				body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(document.querySelector("#dominant_image_color > label > textarea").value))
+				gradioApp.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(() => {
+				gradioApp.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)
+		}
+	})
+
+	// MARK: SVGs
+	document.querySelector(".row-header i.winking-hand-emoji").innerHTML =
+		'<svg aria-hidden="true" style="height: 16px;" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 128 128"><style> @keyframes wink{0%, 60%, 100%{transform: rotate(0deg);}10%, 30%, 70%, 90%{transform: rotate(14deg);}20%, 80%{transform: rotate(-8deg);}40%{transform: rotate(-4deg);}50%{transform: rotate(10deg);}}</style><g style="animation: wink 3s ease-in-out infinite; transform-origin: 50% 50%;"><radialGradient id="a" cx="-779.868" cy="686.689" r="91.008" gradientTransform="scale(1 -1) rotate(45 506.867 1318.897)" gradientUnits="userSpaceOnUse"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><path fill="url(#a)" d="M59.53 107.44c-3.95-3.17-40.63-38.84-41.04-39.23-1.62-1.62-2.64-3.3-2.92-4.84-.29-1.6.2-3 1.5-4.3 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59l16.63 15.98c.29.28.67.42 1.04.42a1.494 1.494 0 0 0 1.07-2.54L19.13 46.25c-2.66-2.66-3.91-6.73-.75-9.89 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59l27.16 26.48c.29.28.67.43 1.05.43s.77-.15 1.06-.44c.58-.58.59-1.52.01-2.11L24.91 28.02c-1.51-1.51-2.42-3.32-2.58-5.08-.15-1.79.48-3.45 1.83-4.8 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.58L67.3 51.31c.29.28.67.43 1.05.43s.77-.15 1.06-.44c.58-.58.59-1.52.01-2.11L45.26 24.36c-1.52-1.52-2.43-3.32-2.58-5.08-.15-1.79.48-3.45 1.83-4.8 1.21-1.21 2.69-1.85 4.28-1.85 1.94 0 3.93.92 5.59 2.59 8.86 8.7 31.99 31.45 32.77 32.29 2.97 2.05 3.57-1.05 3.72-3.06.17-2.34-2.51-10.51-.95-17.86 2.62-9.77 10.17-8.17 10.34-8.09 4.14 1.94 3.35 4.84 1.88 10.67l-.15 1.15c-1.54 7.62 9.04 30.2 9.82 31.89 4.15 9.08 8.93 27.49-6.9 43.32-17.35 17.35-38.83 8.46-45.38 1.91z"/><path fill="#eda600" d="M81.79 117.18c-10.64 0-19.69-5.09-23.26-8.62-3.21-2.62-23.47-22.18-39.97-38.19-.67-.65-1.06-1.02-1.1-1.07-1.87-1.87-3.03-3.82-3.36-5.66-.38-2.09.27-3.98 1.91-5.63 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03l16.61 15.96-26.56-27.42c-3.06-3.06-4.6-8.13-.73-11.99 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03L56.45 62.5 23.84 29.07c-1.74-1.74-2.81-3.87-3-5.99-.19-2.26.59-4.33 2.26-6 1.5-1.5 3.34-2.29 5.34-2.29 2.34 0 4.7 1.07 6.65 3.02l33.26 32.43-24.16-24.83c-1.75-1.75-2.82-3.88-3-6-.19-2.25.59-4.32 2.26-5.99 1.5-1.5 3.34-2.29 5.34-2.29 2.35 0 4.71 1.08 6.65 3.03l7.21 7.07c12.85 12.6 23.59 23.15 24.74 24.33.56.45 1.29.62 1.6.47.2-.1.42-.56.38-1.53-.06-1.7-.3-3.81-.55-6.04-.5-4.48-1.02-9.12-.37-12.18 1.42-5.31 4.21-7.56 6.29-8.53 2.86-1.32 5.63-.86 6.16-.61 5.2 2.44 4.17 6.52 2.75 12.18l-.03.14-.16 1.17c-1.04 5.12 4.3 19.27 9.64 30.8l.08.16c3.57 7.8 10 27.81-7.2 45.01-7.91 7.89-16.47 10.58-24.19 10.58zM21.35 58.72c-1.18 0-2.3.49-3.22 1.41-.95.95-1.28 1.87-1.08 2.97.22 1.21 1.11 2.65 2.5 4.05.01.01.41.4 1.1 1.06 23.42 22.73 37.56 36.24 39.82 38.06l.12.11c5.52 5.52 26.03 15.32 43.26-1.91 15.87-15.87 9.9-34.4 6.59-41.64l-.07-.15c-3.44-7.42-11.26-25.42-9.87-32.6l.23-1.5c1.54-6.12 1.63-7.4-.98-8.66-.77-.14-6.29-.81-8.4 7.06-.53 2.51-.02 7.1.43 11.15.26 2.29.5 4.46.56 6.27.1 2.85-1.25 3.94-2.07 4.34-1.67.81-3.66.12-4.9-.92l-.13-.12c-.61-.66-15.12-14.89-24.72-24.31L53.3 16.3c-2.46-2.47-5.63-2.88-7.76-.75-1.04 1.04-1.51 2.26-1.4 3.61.12 1.41.88 2.88 2.15 4.15L70.5 48.14a3.012 3.012 0 0 1-.02 4.22c-1.11 1.11-3.07 1.13-4.21.03L32.98 19.94c-2.46-2.46-5.64-2.87-7.76-.74-1.04 1.04-1.51 2.26-1.4 3.61.13 1.41.89 2.89 2.15 4.14L58.6 60.41c1.15 1.16 1.14 3.06-.02 4.22-1.11 1.11-3.07 1.13-4.21.03L27.2 38.17c-2.46-2.48-5.64-2.88-7.76-.75-2.59 2.59-1.21 5.8.75 7.77l26.57 27.44a2.988 2.988 0 0 1-.03 4.2c-1.12 1.12-3.06 1.13-4.2.04L25.9 60.89c-1.4-1.41-3.01-2.17-4.55-2.17z"/><path fill="#eda600" d="M84.76 46.54c-5.49 11.21-4.78 26.9 3.46 39.49.93 1.7 2.52.87 1.71-.88-9.95-21.29.48-36.63.48-36.63l-5.65-1.98z"/><path fill="#b0bec5" d="M63.17 4.5c3.02-.79 6.24-.72 9.37.01 3.11.75 6.22 2.33 8.53 4.91 2.26 2.56 3.65 5.67 4.12 8.93.44 3.23.03 6.56-1.5 9.32-.18-3.1-.72-5.95-1.63-8.58-.47-1.31-1.02-2.56-1.69-3.74-.66-1.17-1.44-2.33-2.27-3.28-1.69-1.95-3.98-3.47-6.55-4.65-2.58-1.22-5.39-2.12-8.38-2.92z"/><path fill="#90a4ae" d="M64 13.98c1.67-1.06 3.76-1.28 5.73-.93 1.99.35 3.89 1.34 5.39 2.71 1.49 1.39 2.55 3.14 3.21 4.96.32.91.48 1.87.63 2.8.05.96.05 1.92-.1 2.88-.69-.73-1.23-1.46-1.74-2.17-.59-.67-1.05-1.38-1.58-2.03-1.04-1.29-2.05-2.46-3.14-3.5-1.12-1.01-2.3-1.9-3.67-2.67-1.36-.79-2.89-1.45-4.73-2.05z"/><path fill="#b0bec5" d="M6.83 77.34c1.41 2.76 2.88 5.32 4.59 7.58 1.7 2.26 3.65 4.18 5.92 5.43 1.1.61 2.41 1.14 3.69 1.54 1.29.41 2.63.69 4.01.88 2.76.34 5.66.28 8.73-.19-2.38 2.07-5.56 3.17-8.8 3.41-3.28.22-6.61-.49-9.59-2.17-3-1.71-5.2-4.43-6.58-7.32-1.38-2.91-2.12-6.04-1.97-9.16z"/><path fill="#90a4ae" d="M16.28 76.17c.97 1.68 1.93 3.03 2.98 4.21 1.04 1.18 2.16 2.15 3.38 3.03 1.24.85 2.6 1.6 4.08 2.35.74.38 1.53.68 2.31 1.12.81.35 1.63.72 2.49 1.25-.91.34-1.84.54-2.79.69-.94.04-1.91.09-2.87-.04-1.92-.26-3.84-.93-5.52-2.1-1.65-1.19-3.02-2.84-3.77-4.71-.76-1.86-.98-3.94-.29-5.8z"/></g></svg>'
+	document.querySelector(".row-header i.heart-beat-emoji").innerHTML =
+		'<svg xmlns="http://www.w3.org/2000/svg" style="height: 16px;" viewBox="0 0 512 512"><defs><style> @keyframes beat{0%{transform: scale(1);}5%{transform: scale(0.75);}20%{transform: scale(1);}30%{transform: scale(1);}35%{transform: scale(0.75);}50%{transform: scale(1);}55%{transform: scale(0.75);}70%{transform: scale(1);}}</style></defs><g style="animation: beat 2s ease-in-out infinite; transform-origin: 50% 50%;"><path fill="#bd0a0a" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></g></svg>'
+	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>'
+	document.querySelector("#run_btn").innerHTML = 
+      //'<dotlottie-player src="https://lottie.host/07f9842b-03a8-46dc-a45f-684d4cf57429/2amWXB96uz.lottie" background="transparent" speed="1" loop></dotlottie-player>'
+      '<dotlottie-player src="https://lottie.host/e3515e09-f615-49f0-a63d-a421b45ceb45/XEuKdFRH19.lottie" background="transparent" speed="1" loop></dotlottie-player>'
+  
+
+	const switch_width_height_inner = document.createElement("div")
+    //const switch_width_height_inner_image = document.createElement("div")
+    //switch_width_height_inner_image.id = "switch_width_height_inner_image"
+	switch_width_height_inner.id = "switch_width_height_inner"
+	switch_width_height_inner.setAttribute("data-aspect-ratio", "9-16")
+	switch_width_height_inner.className = "hochformat"
+	switch_width_height_inner.innerHTML = `<div></div>`
+	//switch_width_height_inner.append(switch_width_height_inner_image)
+	switch_width_height.append(switch_width_height_inner)
+	const switch_width_height_btn_inner = document.querySelector("div#switch_width_height_inner")
+
+	switch_width_height.addEventListener("click", () => {
+		//switch_width_height_btn_inner.className = document.querySelector("#image_ratio_buttons > span").textContent.toLocaleLowerCase()
+	})
+
+	switch_ratio_btns.forEach((_) => {
+		_.querySelector("input").addEventListener("click", (e) => {
+			switch_width_height_btn_inner.setAttribute("data-aspect-ratio", e.target.value.replace(":", "-").trim())
+		})
+	})
+
+	onImageRatioButtonsChange(() => {
+		switch_width_height_btn_inner.className = document.querySelector("#image_ratio_buttons > span").textContent.toLocaleLowerCase()
+		const selected_ratio = document.querySelector("#image_ratio_buttons label.selected input").value.replace(":", "-").trim()
+		if (switch_width_height_btn_inner.getAttribute("data-aspect-ratio") != selected_ratio) {
+			switch_width_height_btn_inner.setAttribute("data-aspect-ratio", selected_ratio)
+		}
+	})
+
+	// MARK: Element-Ready function
+	function elementReady(selector) {
+		return new Promise((resolve, reject) => {
+			const el = document.querySelector(selector)
+			if (el) {
+				resolve(el)
+			}
+
+			new MutationObserver((mutationRecords, observer) => {
+				Array.from(document.querySelectorAll(selector)).forEach((element) => {
+					resolve(element)
+					observer.disconnect()
+				})
+			}).observe(document.documentElement, {
+				childList: true,
+				subtree: true,
+			})
+		})
+	}
+
+	// MARK: Mobile Check
+	function istMobile() {
+		// Überprüfen, ob das Gerät ein Touchscreen hat
+		if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
+			gradioContainer.classList.add("blur-container")
+			body.style.setProperty("--blur-value", "12px")
+			gradioApp.style.height = "calc(100vh - 120px)"
+			alertModalElem.style.display = ""
+			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
+		} else if (window.innerWidth < 1024) {
+			gradioContainer.classList.add("blur-container")
+			body.style.setProperty("--blur-value", "12px")
+			gradioApp.style.height = "calc(100vh - 120px)"
+			alertModalElem.style.display = ""
+			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
+		} else {
+			gradioContainer.classList.remove("blur-container")
+			body.style.setProperty("--blur-value", "0px")
+			gradioApp.style.height = ""
+			alertModalElem.style.display = "none"
+			alertModalElemSpan.textContent = ""
+		}
+	}
+
+	// MARK: Event Listeners
+	window.addEventListener("resize", () => {
+		console.log("Event Window resize.")
+		istMobile()
+	})
+
+	elementReady("body > gradio-app > div.gradio-container").then((element) => {
+		console.log("Element exist: " + element)
+		istMobile()
+	})
+
+	return "Custom Gradio JS"
+}

_res/groq_systemmessage_prompt_enhance.json

@@ -1,4 +1,4 @@
-{
-	"role": "system",
-	"content": "You are an AI assistant specialized in improving and diversifying image generation prompts. Your primary function is to take user-provided prompts and enhance them, ensuring they are in English and follow specific guidelines. Here's how you should operate:\n\n1. Language Processing:\n   - If the user's prompt is not in English, translate it to English first.\n\n2. Prompt Analysis:\n   - 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   - The prompt should not be longer than 60 words.\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. Emotional Depth:\n   - Emphasize emotional nuances and moods in the prompt.\n\n7. Interactive Elements:\n   - Suggest ways to imply movement or interaction in static images.\n\n8. 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\n9. Output Format:\n   Ensure the prompt is in English, then respond only with the new prompt in the following format:\n   [detailed prompt] - [style artist medium art movement photo style]\n\nAlways strive to create prompts that are imaginative, detailed, and aligned with the user's original intent while offering a fresh perspective or interpretation."
-}
+{
+	"role": "system",
+	"content": "You are an AI assistant specialized in improving and diversifying image generation prompts. Your primary function is to take user-provided prompts and enhance them, ensuring they are in English and follow specific guidelines. Here's how you should operate:\n\n1. Language Processing:\n   - If the user's prompt is not in English, translate it to English first.\n\n2. Prompt Analysis:\n   - 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   - The prompt should not be longer than 60 words.\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. Emotional Depth:\n   - Emphasize emotional nuances and moods in the prompt.\n\n7. Interactive Elements:\n   - Suggest ways to imply movement or interaction in static images.\n\n8. 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\n9. Output Format:\n   Ensure the prompt is in English, then respond only with the new prompt in the following format:\n   [detailed prompt] - [style artist medium art movement photo style]\n\nAlways strive to create prompts that are imaginative, detailed, and aligned with the user's original intent while offering a fresh perspective or interpretation."
+}

app.py

@@ -1,364 +1,502 @@
-import os, sys, json, re, time, base64, random, shutil
-import gradio as gr
-import numpy as np
-import requests
-from requests import Session
-from requests.adapters import HTTPAdapter
-from requests.packages.urllib3.util.retry import Retry
-from datetime import datetime
-import urllib.parse
-from groq import Groq
-from exif import Image
-from PIL import Image as PILImage, ExifTags as PILExifTags
-from io import BytesIO
-import colorsys
-
-# MARK: INIT
-MAX_SEED = np.iinfo(np.int32).max
-# MAX_SEED = 9999
-MAX_IMAGE_SIZE = 2048
-
-GROQ_APIKEY_PROMPTENHANCE = os.getenv("GROQ_APIKEY_PROMPTENHANCE")
-API2 = os.getenv("API2")
-API2_MODELS = urllib.parse.unquote(API2 + "/models")
-API2_IMAGE = urllib.parse.unquote(API2 + "/imagine")
-API1 = urllib.parse.unquote(os.getenv("API1"))
-
-
-CACHE_DIR = os.path.join(os.path.dirname(__file__), "cache")
-IMAGE_DIR = "cache/images/"
-if not os.path.exists(CACHE_DIR):
-    os.makedirs(CACHE_DIR)
-    print(f"Created cache dir on path {CACHE_DIR}")
-    os.makedirs(os.path.join(CACHE_DIR, "images"))
-    print(f"Created images dir on path {IMAGE_DIR}")
-
-RES = os.path.join(os.path.dirname(__file__), "_res")
-
-gr.set_static_paths(paths=["_res/", "_res/assets/", "_res/assets/emojis/", "_res/assets/favicons/", IMAGE_DIR])
-
-custom_css = RES + "/_custom.css"
-custom_js = RES + "/_custom.js"
-
-custom_head = f"""
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"/>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
-        <link rel="apple-touch-icon" sizes="180x180" href="file=_res/assets/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="file=_res/assets/favicons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="file=_res/assets/favicons/favicon-16x16.png">
-        <link rel="icon" type="image/x-icon" href="file=_res/assets/favicons/favicon.ico">
-        <link rel="manifest" href="file=_res/assets/favicons/site.webmanifest">
-        <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
-        <script src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
-"""
-
-theme = gr.themes.Soft(
-    # primary_hue="orange",
-    radius_size="sm",
-    neutral_hue=gr.themes.Color(c100="#a6adc8", c200="#9399b2", c300="#7f849c", c400="#6c7086", c50="#cdd6f4", c500="#585b70", c600="#45475a", c700="#313244", c800="#1e1e2e", c900="#181825", c950="#11111b"),
-)
-
-title = "Bilder Builder"
-
-
-# MARK: GET PREV. IMAGES
-def get_gallery_images(dirpath):
-    gallery_images = [dirpath + "/" + s for s in os.listdir(dirpath) if os.path.isfile(os.path.join(dirpath, s))]
-    gallery_images.sort(key=lambda s: os.path.getmtime(s), reverse=True)
-    return gallery_images
-
-
-# MARK: READ EXIF
-def read_exif(image_path):
-    with open(image_path, "rb") as src:
-        img = Image(src)
-        img_comment = json.loads(img.user_comment)
-
-        # checking if the key exists before removing
-        if "concept" in img_comment:
-            img_comment.pop("concept")
-
-        return img_comment
-
-
-def read_image_exfi_data(image_path):
-    print("Imagepath:", image_path)
-    img_exif_make, img_exif_comment = read_exif(image_path)
-    return None, image_path, img_exif_comment
-
-
-# MARK: GROQ PROMPT ENHANCE
-def groq_enhance_process(Prompt=""):
-    client = Groq(api_key=GROQ_APIKEY_PROMPTENHANCE)
-    Prompt = "random prompt" if Prompt == "" else Prompt
-    SYSTEMPROMPT = os.path.join(RES, "groq_systemmessage_prompt_enhance.json")
-    with open(SYSTEMPROMPT, "r") as f:
-        SYSTEMPROMPT = json.load(f)
-
-    completion = client.chat.completions.create(
-        model="llama-3.1-70b-versatile",
-        messages=[SYSTEMPROMPT, {"role": "user", "content": Prompt}],
-        temperature=0.8,
-        max_tokens=512,
-        top_p=0.9,
-        stream=False,
-        seed=random.randint(0, MAX_SEED),
-        stop=None,
-    )
-
-    if completion.choices[0].message.content != "":
-        enhanced_prompt = completion.choices[0].message.content
-        enhanced_prompt = re.sub(r"[\.\"]+", "", enhanced_prompt)
-
-    return enhanced_prompt
-
-
-def image_get_size(image_path):
-    img = PILImage.open(image_path)
-    # print("Image size:", img.size)
-    width, height = img.size
-    return width, height
-
-
-# MARK: DOMINANT COLOR
-def image_get_dominant_color(image_path):
-    img = PILImage.open(image_path)
-    img = img.convert("RGB")
-    img = img.resize((100, 100), resample=0)
-    pixels = list(img.getdata())
-
-    # Erzeuge eine Liste mit den Häufigkeiten der Farben
-    colors = []
-    for pixel in pixels:
-        r, g, b = pixel
-        h, s, v = colorsys.rgb_to_hsv(r / 255, g / 255, b / 255)
-        if v > 0.5:  # Filteriere hellere Farben aus
-            continue
-        if v > 0.99:  # Filteriere Weiß aus
-            continue
-        colors.append((h, s, v))
-
-    # Ermittle die dominante Farbe
-    dominant_color = max(colors, key=lambda x: x[2])
-    dominant_color_rgb = colorsys.hsv_to_rgb(dominant_color[0], dominant_color[1], dominant_color[2])
-    dominant_color_rgb = [int(c * 255) for c in dominant_color_rgb]
-    dominant_color_rgb = f"rgb({dominant_color_rgb[0]}, {dominant_color_rgb[1]}, {dominant_color_rgb[2]})"
-    # print(dominant_color_rgb)
-
-    return dominant_color_rgb
-
-
-# MARK: CLEAR COMPONENTS
-def clear_components():
-    return None
-
-
-def process(Prompt, used_model, image_width, image_height, image_ratio, image_seed, randomize_seed):
-    if Prompt == "":
-        gr.Info("Kein Prompt angegeben, es wird ein zufälliger Prompt generiert.", duration=12)
-        Prompt = groq_enhance_process("random prompt")
-
-    image_ratio = "9:16" if image_ratio == "" else image_ratio
-    used_seed = random.randint(0, MAX_SEED) if image_seed == 0 or randomize_seed else image_seed
-    # used_model = "turbo" if int(image_width) > 1024 or int(image_height) > 1024 else "flux"  # turbo, flux
-
-    timestamp = datetime.now().strftime("%Y-%m-%d-%H-%M-%S")
-    filename_prompt = re.sub(r"[^\w\s-]", "", Prompt).strip().replace(" ", "_")
-    filename = timestamp + "_" + filename_prompt[:100] + ".png"
-    file_path = IMAGE_DIR + filename
-
-    # Retry-Logik mit requests und Retry
-    session = Session()
-    retries = Retry(total=3, status_forcelist=[429, 500, 502, 503, 504], backoff_factor=0.3, respect_retry_after_header=True)  # Max 3 Versuche  # Codes, die wiederholt werden  # Exponential Backoff  # Retry-Header beachten
-    adapter = HTTPAdapter(max_retries=retries)
-    session.mount("https://", adapter)
-    session.mount("http://", adapter)
-
-    u_model = re.sub('api\d-', '', used_model.lower())
-    API1_REQUEST_URL = f"{API1}{urllib.parse.quote(Prompt)}?model={u_model}&width={image_width}&height={image_height}&nologo=true&enhance=false&nofeed=true&seed={used_seed}"
-    API2_REQUEST_URL = f"{API2_IMAGE}?prompt={urllib.parse.quote(Prompt)}&size={urllib.parse.quote(image_ratio)}&seed={used_seed}&model={u_model}"
-    REQUEST_URL = API2_REQUEST_URL if used_model.lower().startswith("api1-") else API1_REQUEST_URL
-    
-    try:
-        response = session.get(REQUEST_URL, timeout=60)
-        if response.status_code == 200:
-            print("REQUEST URL:\n" + REQUEST_URL + "\n\nImagine API Request solved")
-            img = PILImage.open(BytesIO(response.content))
-            img.save(file_path, "png")
-            print("Save image to: ")
-            print(file_path)
-
-            # img_exif_comment = "" # read_exif(file_path)
-            img_dominant_color = image_get_dominant_color(file_path)
-            img_width, img_height = image_get_size(file_path)
-
-            return ({"value": Prompt, "__type__": "update"}, {"value": file_path, "__type__": "update"}, {"value": None, "visible": False, "__type__": "update"}, {"visible": True, "__type__": "update"}, {"value": Prompt, "visible": True, "__type__": "update"}, img_width, img_height, used_seed, {"value": file_path, "visible": True, "__type__": "update"}, img_dominant_color, used_seed)
-        else:
-            print("Imagine API Request ERROR")
-            raise gr.Error("Imagine API-Aufruf fehlgeschlagen 💥!", duration=15)
-    except requests.exceptions.Timeout:
-        raise gr.Error("⏰ Zeitüberschreitung beim API-Aufruf", duration=15)
-    except requests.exceptions.RequestException as e:
-        print(f"Unbekannter Fehler beim API-Aufruf: {e}")
-        raise gr.Error("Unbekannter Fehler beim API-Aufruf! 🤷‍♂️", duration=15)
-
-def check_api(url):
-    try:
-        response = requests.get(url, timeout=8)
-        print(f"Checking Status for: {url}, it returns statuscode {response.status_code}")
-        return response.status_code
-    except requests.exceptions.RequestException as e:
-        print(f"An error occurred: {e}")
-        return int(999)
-
-
-def get_inference_models():
-
-    status_api_1 = check_api(API1)
-    status_api_2 = check_api(API2)
-
-    info_api_1 = "🟢API1👍" if status_api_1 == 200 else "🔴API1👎🔌"
-    info_api_2 = "🟢API2👍" if status_api_2 == 200 else "🔴API2👎🔌"
-
-    api_models_1 = ["API1-FLUX", "API1-FLUX-Pro", "API1-FLUX-CablyAI", "API1-Turbo"]
-    api_models_2 = ["API2-FLUX-Realism", "API2-FLUX-Pixel", "API2-FLUX-Anime", "API2-FLUX-3D", "API2-FLUX-Disney", "API2-ANY-DARK"]
-
-    models = [model for model in api_models_1 if status_api_1 == 200] + [model for model in api_models_2 if status_api_2 == 200]
-    info_api_status = f"Status: {info_api_1} & {info_api_2}"
-    
-    return gr.update(choices=models, value=models[0], interactive=True, info=info_api_status)
-
-
-# MARK: Gradio BLOCKS UI
-with gr.Blocks(theme=theme, head=custom_head, css=custom_css, js=custom_js, title=title) as demo:
-    with gr.Row(elem_classes="row-header"):
-        gr.Markdown(f"""
-                <div class="flex-wrapper">
-                	<div style="width: 100%">
-                		<h1>{title}</h1>
-                		<p class="errorinfo" style="color: #e26c5a; margin-top: 0.3rem; margin-bottom: 0.3rem;">Aktuell funktioniert die APP nicht, da ich heute wenig Zeit habe werde ich es erst morgen schaffen die Probleme zu beheben.</p>
-                		<p>
-                			<span style="font-weight: 600">LG Sebastian</span>
-                			<i class="winking-hand-emoji"></i> gib dem Space gerne ein
-                			<i class="heart-beat-emoji"></i>
-                		</p>
-                	</div>
-                	<div style="">
-                		<div class="btn-container">
-                			<a title="Support me on ko-fi.com" class="kofi-button" style="background-color: #72a4f2" href="https://ko-fi.com/Z8Z316DSO4" target="_blank" >
-                			<span class="kofitext"><img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi donations" class="kofiimg"/>Support me on Ko-fi</span>
-                			</a>
-                		</div>
-                	</div>
-                </div>
-                """, elem_classes="md-header")
-                    
-    with gr.Tab("Bilder Builder"):
-        with gr.Row():
-            with gr.Column(scale=2):  # min_width=420,
-                with gr.Row():
-                    placeholder_text = "[???] Generiert dir einen zufälligen Prompt.\n[STERN] optimiert deinen eignen Prompt.\n[RUN] generiert dein Bild."
-                    text_prompt = gr.Textbox(label="Prompt", show_label=False, lines=12, max_lines=18, placeholder=placeholder_text, elem_id="prompt_input", elem_classes="prompt-input hide-progress", autofocus=True)
-                with gr.Row():
-                    random_prompt_button = gr.Button("", variant="secondary", elem_id="random_prompt_btn", elem_classes="random-prompt-btn", icon="_res/assets/star_light_48.png")
-                    enhance_prompt_button = gr.Button("", variant="secondary", elem_id="enhance_prompt_btn", elem_classes="enhance-prompt-btn", icon="_res/assets/star_light_48.png")
-                    run_button = gr.Button("Erstellen", variant="primary", elem_id="run_btn", elem_classes="run-btn")
-                with gr.Row(elem_classes="image_size_selctor_wrapper"):
-                    with gr.Column(scale=1):
-                        with gr.Row():
-                            # inference_models, selected_model = get_inference_models()
-                            #  select_model = gr.Dropdown(choices=inference_models, value=selected_model, label="Model", elem_id="select_model", elem_classes="select-model")
-                            select_model = gr.Dropdown(label="Model", elem_id="select_model", elem_classes="select-model")
-                            # with gr.Row():
-                            image_width = gr.Number(label="Breite", minimum=256, maximum=MAX_IMAGE_SIZE, value=576, step=32, elem_id="image_width_selector", elem_classes="image-width-selector", scale=1, visible=False)
-                            image_height = gr.Number(label="Höhe", minimum=256, maximum=MAX_IMAGE_SIZE, value=1024, step=32, elem_id="image_height_selector", elem_classes="image-height-selector", scale=1, visible=False)
-                        with gr.Row():
-                            image_ratio_buttons = gr.Radio(["9:16", "3:4", "2:3", "1:1"], value="9:16", label="Hochformat", show_label=True, info="Seitenverhältniss drehen", interactive=True, elem_id="image_ratio_buttons", elem_classes="image-ratio-buttons", container=True, scale=2)
-                            switch_width_height = gr.Button("", size="sm", elem_id="switch_width_height", elem_classes="switch-ratio-btn", variant="primary", scale=1)
-                        with gr.Column():
-                            randomize_seed = gr.Checkbox(label="Randomize seed", value=True, elem_classes="random-seed-cb toggle-btn")
-                            image_seed = gr.Slider(label="Seed", info="Jeder Seed generiert ein anderes Bild mit dem selben Prompt", minimum=0, step=1, value=42, maximum=MAX_SEED, elem_id="image_seed", elem_classes="image-seed hide-progress", interactive=False)
-
-            with gr.Column(scale=4):  # min_width=600,
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        with gr.Row():
-                            output_image = gr.Image(show_label=False, min_width=320, scale=3, elem_id="output_image", elem_classes="output-image", type="filepath", format="webp")
-                            # gallery = gr.Gallery(label="Bisher erstellte Bilder", show_label=True, value=get_gallery_images(IMAGE_DIR), elem_id="gallery", columns=[4], object_fit="cover", height="auto", interactive=False, format="webp")
-                            with gr.Column(scale=1, visible=False, elem_classes="image-info-wrapper") as image_info_wrapper:
-                                with gr.Group():
-                                    image_informations = gr.Markdown("""## Bildinformationen""", visible=True)
-                                with gr.Row(elem_classes="img-size-wrapper"):
-                                    image_info_tb_width = gr.Textbox(label="Breite", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-width")
-                                    image_info_tb_height = gr.Textbox(label="Höhe", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-height")
-                                with gr.Row(elem_classes="img-seed-wrapper"):
-                                    image_info_tb_seed = gr.Textbox(label="Seed", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-seed")
-                                    image_info_tb_prompt = gr.Textbox("Bild Prompt", lines=4, max_lines=8, interactive=False, elem_classes="hide-progress", show_copy_button=True, visible=False)
-                                image_download_button = gr.DownloadButton("Bild herunterladen", value=None, elem_classes="download-button", variant="primary", visible=False)
-
-                output_url = gr.Textbox(label="Output URL", show_label=True, interactive=False, visible=False)
-                outpu_image_comment = gr.Json(visible=False)
-                output_dominant_image_color = gr.Textbox(show_label=False, elem_id="dominant_image_color", visible=True, elem_classes="output-dominant-image-color")
-
-        demo.load(get_inference_models, outputs=[select_model])
-        
-        def switch_image_size_values(image_width, image_height):
-            return image_height, image_width
-
-        def switch_image_ratio_buttons(ratio_value):
-            ratio_value = ratio_value.split(":")
-            ratio_value_new = f"{int(ratio_value[1])}:{int(ratio_value[0])}"
-
-            if int(ratio_value[1]) > int(ratio_value[0]):
-                # Querformat
-                new_choises = ["16:9", "4:3", "3:2", "1:1"]
-                new_label = "Querformat"
-            elif int(ratio_value[1]) < int(ratio_value[0]):
-                # Hochformat
-                new_choises = ["9:16", "3:4", "2:3", "1:1"]
-                new_label = "Hochformat"
-            elif int(ratio_value[1]) == int(ratio_value[0]):
-                new_choises = image_ratio_buttons.choices
-                new_label = "Quadratisch"
-
-            return {"choices": new_choises, "value": ratio_value_new, "label": new_label, "__type__": "update"}
-
-        def calculate_ratio_values(image_ratio_buttons):
-            ratio_value = image_ratio_buttons.split(":")
-            if int(ratio_value[0]) > int(ratio_value[1]):
-                a = 1024
-                b = int(a * int(ratio_value[1]) / int(ratio_value[0]))
-                b = round(b / 8) * 8
-                new_width = a
-                new_height = b
-                new_label = "Querformat"
-            elif int(ratio_value[0]) < int(ratio_value[1]):
-                b = 1024
-                a = int(b * int(ratio_value[0]) / int(ratio_value[1]))
-                a = round(a / 8) * 8
-                new_width = a
-                new_height = b
-                new_label = "Hochformat"
-            elif int(ratio_value[0]) == int(ratio_value[1]):
-                new_width = 1024
-                new_height = 1024
-                new_label = "Quadratisch"
-
-            return {"label": new_label, "__type__": "update"}, new_width, new_height
-
-        switch_width_height.click(fn=switch_image_size_values, inputs=[image_width, image_height], outputs=[image_width, image_height], show_progress="hidden", show_api=False)
-        switch_width_height.click(fn=switch_image_ratio_buttons, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons], show_progress="hidden", show_api=False)
-
-        image_ratio_buttons.input(fn=calculate_ratio_values, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons, image_width, image_height], show_progress="hidden", show_api=False)
-
-        run_button.click(fn=lambda: ({"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}), outputs=[run_button, enhance_prompt_button, random_prompt_button], show_api=False, js="() => document.querySelector('dotlottie-player').play()").then(fn=clear_components, outputs=[output_image], show_api=False).then(
-            fn=process, inputs=[text_prompt, select_model, image_width, image_height, image_ratio_buttons, image_seed, randomize_seed], outputs=[text_prompt, output_image, output_url, image_informations, image_info_tb_prompt, image_info_tb_width, image_info_tb_height, image_info_tb_seed, image_download_button, output_dominant_image_color, image_seed]
-        ).then(fn=lambda: ({"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}), outputs=[run_button, enhance_prompt_button, random_prompt_button], show_api=False, js="() => document.querySelector('dotlottie-player').stop()")
-
-        randomize_seed.input(lambda x: {"interactive": False if x == True else True, "__type__": "update"}, inputs=[randomize_seed], outputs=[image_seed], show_api=False)
-
-        enhance_prompt_button.click(fn=groq_enhance_process, inputs=[text_prompt], outputs=[text_prompt], show_api=False)
-        random_prompt_button.click(fn=groq_enhance_process, inputs=None, outputs=[text_prompt], show_api=False)
-
-# MARK: Gradio LAUNCH
-demo.launch(show_api=True)
+import os, sys, json, re, time, base64, random, shutil
+import gradio as gr
+import numpy as np
+import requests
+from requests import Session
+from requests.adapters import HTTPAdapter
+from requests.packages.urllib3.util.retry import Retry
+from datetime import datetime
+import urllib.parse
+from groq import Groq
+from exif import Image
+from PIL import Image as PILImage, ExifTags as PILExifTags
+from io import BytesIO
+import colorsys
+import spaces
+
+if not "SPACE" in os.environ:
+    from dotenv import load_dotenv
+
+    load_dotenv()
+
+# MARK: INIT
+MAX_SEED = np.iinfo(np.int32).max
+MAX_IMAGE_SIZE = 2048
+
+GROQ_APIKEY_PROMPTENHANCE = os.getenv("GROQ_APIKEY_PROMPTENHANCE")
+API1 = urllib.parse.unquote(os.getenv("API1"))
+API2 = os.getenv("API2")
+API2_MODELS = urllib.parse.unquote(API2 + "/models")
+API2_IMAGE = urllib.parse.unquote(API2 + "/imagine")
+
+
+CACHE_DIR = os.path.join(os.path.dirname(__file__), "cache")
+IMAGE_DIR = "cache/images/"
+if not os.path.exists(CACHE_DIR):
+    os.makedirs(CACHE_DIR)
+    print(f"Created cache dir on path {CACHE_DIR}")
+    os.makedirs(os.path.join(CACHE_DIR, "images"))
+    print(f"Created images dir on path {IMAGE_DIR}")
+
+RES = os.path.join(os.path.dirname(__file__), "_res")
+
+gr.set_static_paths(paths=["_res/", "_res/assets/", "_res/assets/emojis/", "_res/assets/favicons/", IMAGE_DIR])
+
+custom_css = RES + "/_custom.css"
+custom_js = RES + "/_custom.js"
+
+custom_head = f"""
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"/>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
+        <link rel="apple-touch-icon" sizes="180x180" href="file=_res/assets/favicons/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="file=_res/assets/favicons/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="file=_res/assets/favicons/favicon-16x16.png">
+        <link rel="icon" type="image/x-icon" href="file=_res/assets/favicons/favicon.ico">
+        <link rel="manifest" href="file=_res/assets/favicons/site.webmanifest">
+        <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
+        <script src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
+"""
+
+theme = gr.themes.Soft(
+    # primary_hue="orange",
+    radius_size="sm",
+    neutral_hue=gr.themes.Color(
+        c100="#a6adc8",
+        c200="#9399b2",
+        c300="#7f849c",
+        c400="#6c7086",
+        c50="#cdd6f4",
+        c500="#585b70",
+        c600="#45475a",
+        c700="#313244",
+        c800="#1e1e2e",
+        c900="#181825",
+        c950="#11111b",
+    ),
+)
+
+title = "Bilder Builder"
+
+
+# MARK: READ EXIF
+def read_exif(image_path):
+    with open(image_path, "rb") as src:
+        img = Image(src)
+        img_comment = json.loads(img.user_comment)
+
+        # checking if the key exists before removing
+        if "concept" in img_comment:
+            img_comment.pop("concept")
+
+        return img_comment
+
+
+def read_image_exfi_data(image_path):
+    print("Imagepath:", image_path)
+    img_exif_make, img_exif_comment = read_exif(image_path)
+    return None, image_path, img_exif_comment
+
+
+# MARK: GROQ PROMPT ENHANCE
+def groq_enhance_process(Prompt=""):
+    client = Groq(api_key=GROQ_APIKEY_PROMPTENHANCE)
+    Prompt = "random prompt" if Prompt == "" else Prompt
+    SYSTEMPROMPT = os.path.join(RES, "groq_systemmessage_prompt_enhance.json")
+    with open(SYSTEMPROMPT, "r") as f:
+        SYSTEMPROMPT = json.load(f)
+
+    completion = client.chat.completions.create(
+        model="llama-3.1-70b-versatile",
+        messages=[SYSTEMPROMPT, {"role": "user", "content": Prompt}],
+        temperature=0.8,
+        max_tokens=512,
+        top_p=0.9,
+        stream=False,
+        seed=random.randint(0, MAX_SEED),
+        stop=None,
+    )
+
+    if completion.choices[0].message.content != "":
+        enhanced_prompt = completion.choices[0].message.content
+        enhanced_prompt = re.sub(r"[\.\"]+", "", enhanced_prompt)
+
+    return enhanced_prompt
+
+
+def image_get_size(image_path):
+    img = PILImage.open(image_path)
+    # print("Image size:", img.size)
+    width, height = img.size
+    return width, height
+
+
+# MARK: DOMINANT COLOR
+def image_get_dominant_color(image_path):
+    img = PILImage.open(image_path)
+    img = img.convert("RGB")
+    img = img.resize((100, 100), resample=0)
+    pixels = list(img.getdata())
+
+    # Erzeuge eine Liste mit den Häufigkeiten der Farben
+    colors = []
+    for pixel in pixels:
+        r, g, b = pixel
+        h, s, v = colorsys.rgb_to_hsv(r / 255, g / 255, b / 255)
+        if v > 0.5:  # Filteriere hellere Farben aus
+            continue
+        if v > 0.99:  # Filteriere Weiß aus
+            continue
+        colors.append((h, s, v))
+
+    # Ermittle die dominante Farbe
+    dominant_color = max(colors, key=lambda x: x[2])
+    dominant_color_rgb = colorsys.hsv_to_rgb(dominant_color[0], dominant_color[1], dominant_color[2])
+    dominant_color_rgb = [int(c * 255) for c in dominant_color_rgb]
+    dominant_color_rgb = f"rgb({dominant_color_rgb[0]}, {dominant_color_rgb[1]}, {dominant_color_rgb[2]})"
+    # print(dominant_color_rgb)
+
+    return dominant_color_rgb
+
+
+# MARK: CLEAR COMPONENTS
+def clear_components():
+    return None
+
+
+def process(Prompt, used_model, image_width, image_height, image_ratio, image_seed, randomize_seed, gallery):
+    if Prompt == "":
+        gr.Info("Kein Prompt angegeben, es wird ein zufälliger Prompt generiert.", duration=12)
+        Prompt = groq_enhance_process("random prompt")
+
+    image_ratio = "9:16" if image_ratio == "" else image_ratio
+    used_seed = random.randint(0, MAX_SEED) if image_seed == 0 or randomize_seed else image_seed
+    # used_model = "turbo" if int(image_width) > 1024 or int(image_height) > 1024 else "flux"  # turbo, flux
+
+    timestamp = datetime.now().strftime("%Y-%m-%d-%H-%M-%S")
+    filename_prompt = re.sub(r"[^\w\s-]", "", Prompt).strip().replace(" ", "_")
+    filename = timestamp + "_" + filename_prompt[:100] + ".png"
+    file_path = IMAGE_DIR + filename
+
+    # Retry-Logik mit requests und Retry
+    session = Session()
+    retries = Retry(
+        total=3, status_forcelist=[429, 500, 502, 503, 504], backoff_factor=0.3, respect_retry_after_header=True
+    )  # Max 3 Versuche  # Codes, die wiederholt werden  # Exponential Backoff  # Retry-Header beachten
+    adapter = HTTPAdapter(max_retries=retries)
+    session.mount("https://", adapter)
+    session.mount("http://", adapter)
+
+    u_model = re.sub("api\d-", "", used_model.lower())
+    API1_REQUEST_URL = f"{API1}{urllib.parse.quote(Prompt)}?model={u_model}&width={image_width}&height={image_height}&nologo=true&enhance=false&nofeed=true&seed={used_seed}"
+    API2_REQUEST_URL = f"{API2_IMAGE}?prompt={urllib.parse.quote(Prompt)}&size={urllib.parse.quote(image_ratio)}&seed={used_seed}&model={u_model}"
+    REQUEST_URL = API1_REQUEST_URL if used_model.lower().startswith("api1-") else API2_REQUEST_URL
+    print("REQUEST URL:\n" + REQUEST_URL + "\n\nImagine API Request started")
+
+    try:
+        response = session.get(REQUEST_URL, timeout=60)
+        if response.status_code == 200:
+            print("REQUEST URL:\n" + REQUEST_URL + "\n\nImagine API Request solved")
+            img = PILImage.open(BytesIO(response.content))
+            img.save(file_path, "png")
+            print("Save image to: ")
+            print(file_path)
+
+            # img_exif_comment = "" # read_exif(file_path)
+            img_dominant_color = image_get_dominant_color(file_path)
+            img_width, img_height = image_get_size(file_path)
+
+            new_gallery = [i for i in gallery] if gallery else []
+            new_gallery.append(file_path)
+            gallery = new_gallery
+
+            return (
+                {"value": Prompt, "__type__": "update"},
+                {"value": file_path, "__type__": "update"},
+                {"value": gallery, "selected_index": len(gallery) - 1, "__type__": "update"},
+                {"value": None, "visible": False, "__type__": "update"},
+                {"visible": True, "__type__": "update"},
+                {"value": Prompt, "visible": True, "__type__": "update"},
+                img_width,
+                img_height,
+                used_seed,
+                {"value": file_path, "visible": True, "__type__": "update"},
+                img_dominant_color,
+                used_seed,
+            )
+        else:
+            print("Imagine API Request ERROR")
+            raise gr.Error("Imagine API-Aufruf fehlgeschlagen 💥!", duration=15)
+    except requests.exceptions.Timeout:
+        raise gr.Error("⏰ Zeitüberschreitung beim API-Aufruf", duration=15)
+    except requests.exceptions.RequestException as e:
+        print(f"Unbekannter Fehler beim API-Aufruf: {e}")
+        raise gr.Error("Unbekannter Fehler beim API-Aufruf! 🤷‍♂️", duration=15)
+
+
+def check_api(url):
+    try:
+        response = requests.get(url, timeout=8)
+        print(f"Checking Status for: {url}, it returns statuscode {response.status_code}")
+        return response.status_code
+    except requests.exceptions.RequestException as e:
+        print(f"An error occurred: {e}")
+        return int(999)
+
+
+def get_inference_models():
+
+    status_api_1 = check_api(API1)
+    status_api_2 = check_api(API2)
+
+    info_api_1 = "🟢API1👍" if status_api_1 == 200 else "🔴API1👎🔌"
+    info_api_2 = "🟢API2👍" if status_api_2 == 200 else "🔴API2👎🔌"
+
+    api_models_1 = ["API1-FLUX", "API1-FLUX-Pro", "API1-FLUX-CablyAI", "API1-Turbo"]
+    api_models_2 = ["API2-FLUX-Realism", "API2-FLUX-Pixel", "API2-FLUX-Anime", "API2-FLUX-3D", "API2-FLUX-Disney", "API2-ANY-DARK"]
+
+    models = [model for model in api_models_1 if status_api_1 == 200] + [model for model in api_models_2 if status_api_2 == 200]
+    info_api_status = f"Status: {info_api_1} & {info_api_2}"
+
+    return gr.update(choices=models, value=models[0], interactive=True, info=info_api_status)
+
+
+# MARK: Gradio BLOCKS UI
+with gr.Blocks(theme=theme, head=custom_head, css=custom_css, js=custom_js, title=title) as demo:
+    with gr.Row(elem_classes="row-header"):
+        gr.Markdown(
+            f"""
+                <div class="flex-wrapper">
+                	<div style="width: 100%">
+                		<h1>{title}</h1>
+                		<p class="errorinfo" style="color: #e26c5a; margin-top: 0.3rem; margin-bottom: 0.3rem;">Aktuell funktioniert die APP nicht, da ich heute wenig Zeit habe werde ich es erst morgen schaffen die Probleme zu beheben.</p>
+                		<p>
+                			<span style="font-weight: 600">LG Sebastian</span>
+                			<i class="winking-hand-emoji"></i> gib dem Space gerne ein
+                			<i class="heart-beat-emoji"></i>
+                		</p>
+                	</div>
+                	<div style="">
+                		<div class="btn-container">
+                			<a title="Support me on ko-fi.com" class="kofi-button" style="background-color: #72a4f2" href="https://ko-fi.com/Z8Z316DSO4" target="_blank" >
+                			<span class="kofitext"><img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi donations" class="kofiimg"/>Support me on Ko-fi</span>
+                			</a>
+                		</div>
+                	</div>
+                </div>
+                """,
+            elem_classes="md-header",
+        )
+
+    with gr.Tab("Bilder Builder"):
+        with gr.Row():
+            with gr.Column(scale=2):  # min_width=420,
+                with gr.Row():
+                    placeholder_text = "[???] Generiert dir einen zufälligen Prompt.\n[STERN] optimiert deinen eignen Prompt.\n[RUN] generiert dein Bild."
+                    text_prompt = gr.Textbox(
+                        label="Prompt",
+                        show_label=False,
+                        lines=12,
+                        max_lines=18,
+                        placeholder=placeholder_text,
+                        elem_id="prompt_input",
+                        elem_classes="prompt-input hide-progress",
+                        autofocus=True,
+                    )
+                with gr.Row():
+                    random_prompt_button = gr.Button("", variant="secondary", elem_id="random_prompt_btn", elem_classes="random-prompt-btn", icon="_res/assets/star_light_48.png")
+                    enhance_prompt_button = gr.Button(
+                        "", variant="secondary", elem_id="enhance_prompt_btn", elem_classes="enhance-prompt-btn", icon="_res/assets/star_light_48.png"
+                    )
+                    run_button = gr.Button("Erstellen", variant="primary", elem_id="run_btn", elem_classes="run-btn", interactive=False)
+                with gr.Row(elem_classes="image_size_selctor_wrapper"):
+                    with gr.Column(scale=1):
+                        with gr.Row():
+                            # inference_models, selected_model = get_inference_models()
+                            #  select_model = gr.Dropdown(choices=inference_models, value=selected_model, label="Model", elem_id="select_model", elem_classes="select-model")
+                            select_model = gr.Dropdown(label="Model", elem_id="select_model", elem_classes="select-model")
+                            # with gr.Row():
+                            image_width = gr.Number(
+                                label="Breite",
+                                minimum=256,
+                                maximum=MAX_IMAGE_SIZE,
+                                value=576,
+                                step=32,
+                                elem_id="image_width_selector",
+                                elem_classes="image-width-selector",
+                                scale=1,
+                                visible=False,
+                            )
+                            image_height = gr.Number(
+                                label="Höhe",
+                                minimum=256,
+                                maximum=MAX_IMAGE_SIZE,
+                                value=1024,
+                                step=32,
+                                elem_id="image_height_selector",
+                                elem_classes="image-height-selector",
+                                scale=1,
+                                visible=False,
+                            )
+                        with gr.Row():
+                            image_ratio_buttons = gr.Radio(
+                                ["9:16", "3:4", "2:3", "1:1"],
+                                value="9:16",
+                                label="Hochformat",
+                                show_label=True,
+                                info="Seitenverhältniss drehen",
+                                interactive=True,
+                                elem_id="image_ratio_buttons",
+                                elem_classes="image-ratio-buttons",
+                                container=True,
+                                scale=2,
+                            )
+                            switch_width_height = gr.Button("", size="sm", elem_id="switch_width_height", elem_classes="switch-ratio-btn", variant="primary", scale=1)
+                        with gr.Column():
+                            randomize_seed = gr.Checkbox(label="Randomize seed", value=True, elem_classes="random-seed-cb toggle-btn")
+                            image_seed = gr.Slider(
+                                label="Seed",
+                                info="Jeder Seed generiert ein anderes Bild mit dem selben Prompt",
+                                minimum=0,
+                                step=1,
+                                value=42,
+                                maximum=MAX_SEED,
+                                elem_id="image_seed",
+                                elem_classes="image-seed hide-progress",
+                                interactive=False,
+                            )
+
+            with gr.Column(scale=4):  # min_width=600,
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        with gr.Row():
+                            with gr.Column():
+                                output_image = gr.Image(
+                                    show_label=False, min_width=320, elem_id="output_image", elem_classes="output-image", type="filepath", format="webp", visible=False
+                                )
+                                gallery = gr.Gallery(
+                                    label="Bisher erstellte Bilder",
+                                    show_label=True,
+                                    elem_id="gallery",
+                                    columns=[4],
+                                    object_fit="cover",
+                                    height="auto",
+                                    interactive=False,
+                                    type="filepath",
+                                    format="webp",
+                                )
+                            with gr.Column(scale=1, visible=False, elem_classes="image-info-wrapper") as image_info_wrapper:
+                                with gr.Group():
+                                    image_informations = gr.Markdown("""## Bildinformationen""", visible=True)
+                                with gr.Row(elem_classes="img-size-wrapper"):
+                                    image_info_tb_width = gr.Textbox(
+                                        label="Breite", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-width"
+                                    )
+                                    image_info_tb_height = gr.Textbox(
+                                        label="Höhe", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-height"
+                                    )
+                                with gr.Row(elem_classes="img-seed-wrapper"):
+                                    image_info_tb_seed = gr.Textbox(label="Seed", lines=1, max_lines=1, interactive=False, show_copy_button=True, elem_classes="image-info-tb-seed")
+                                    image_info_tb_prompt = gr.Textbox(
+                                        "Bild Prompt", lines=4, max_lines=8, interactive=False, elem_classes="hide-progress", show_copy_button=True, visible=False
+                                    )
+                                image_download_button = gr.DownloadButton("Bild herunterladen", value=None, elem_classes="download-button", variant="primary", visible=False)
+
+                output_url = gr.Textbox(label="Output URL", show_label=True, interactive=False, visible=False)
+                outpu_image_comment = gr.Json(visible=False)
+                output_dominant_image_color = gr.Textbox(show_label=False, elem_id="dominant_image_color", visible=True, elem_classes="output-dominant-image-color")
+
+        demo.load(
+            lambda x: ({"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}),
+            outputs=[run_button, enhance_prompt_button, random_prompt_button],
+        ).then(get_inference_models, outputs=[select_model]).then(
+            lambda x: ({"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}),
+            outputs=[run_button, enhance_prompt_button, random_prompt_button],
+        )
+
+        def switch_image_size_values(image_width, image_height):
+            return image_height, image_width
+
+        def switch_image_ratio_buttons(ratio_value):
+            ratio_value = ratio_value.split(":")
+            ratio_value_new = f"{int(ratio_value[1])}:{int(ratio_value[0])}"
+
+            if int(ratio_value[1]) > int(ratio_value[0]):
+                # Querformat
+                new_choises = ["16:9", "4:3", "3:2", "1:1"]
+                new_label = "Querformat"
+            elif int(ratio_value[1]) < int(ratio_value[0]):
+                # Hochformat
+                new_choises = ["9:16", "3:4", "2:3", "1:1"]
+                new_label = "Hochformat"
+            elif int(ratio_value[1]) == int(ratio_value[0]):
+                new_choises = image_ratio_buttons.choices
+                new_label = "Quadratisch"
+
+            return {"choices": new_choises, "value": ratio_value_new, "label": new_label, "__type__": "update"}
+
+        def calculate_ratio_values(image_ratio_buttons):
+            ratio_value = image_ratio_buttons.split(":")
+            if int(ratio_value[0]) > int(ratio_value[1]):
+                a = 1024
+                b = int(a * int(ratio_value[1]) / int(ratio_value[0]))
+                b = round(b / 8) * 8
+                new_width = a
+                new_height = b
+                new_label = "Querformat"
+            elif int(ratio_value[0]) < int(ratio_value[1]):
+                b = 1024
+                a = int(b * int(ratio_value[0]) / int(ratio_value[1]))
+                a = round(a / 8) * 8
+                new_width = a
+                new_height = b
+                new_label = "Hochformat"
+            elif int(ratio_value[0]) == int(ratio_value[1]):
+                new_width = 1024
+                new_height = 1024
+                new_label = "Quadratisch"
+
+            return {"label": new_label, "__type__": "update"}, new_width, new_height
+
+        switch_width_height.click(fn=switch_image_size_values, inputs=[image_width, image_height], outputs=[image_width, image_height], show_progress="hidden", show_api=False)
+        switch_width_height.click(fn=switch_image_ratio_buttons, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons], show_progress="hidden", show_api=False)
+
+        image_ratio_buttons.input(
+            fn=calculate_ratio_values, inputs=[image_ratio_buttons], outputs=[image_ratio_buttons, image_width, image_height], show_progress="hidden", show_api=False
+        )
+
+        run_button.click(
+            fn=lambda: ({"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}, {"interactive": False, "__type__": "update"}),
+            outputs=[run_button, enhance_prompt_button, random_prompt_button],
+            show_api=False,
+            js="() => document.querySelector('dotlottie-player').play()",
+        ).then(fn=clear_components, outputs=[output_image], show_api=False).then(
+            fn=process,
+            inputs=[text_prompt, select_model, image_width, image_height, image_ratio_buttons, image_seed, randomize_seed, gallery],
+            outputs=[
+                text_prompt,
+                output_image,
+                gallery,
+                output_url,
+                image_informations,
+                image_info_tb_prompt,
+                image_info_tb_width,
+                image_info_tb_height,
+                image_info_tb_seed,
+                image_download_button,
+                output_dominant_image_color,
+                image_seed,
+            ],
+        ).then(
+            fn=lambda: ({"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}, {"interactive": True, "__type__": "update"}),
+            outputs=[run_button, enhance_prompt_button, random_prompt_button],
+            show_api=False,
+            js="() => document.querySelector('dotlottie-player').stop()",
+        )
+
+        randomize_seed.input(lambda x: {"interactive": False if x == True else True, "__type__": "update"}, inputs=[randomize_seed], outputs=[image_seed], show_api=False)
+
+        enhance_prompt_button.click(fn=groq_enhance_process, inputs=[text_prompt], outputs=[text_prompt], show_api=False)
+        random_prompt_button.click(fn=groq_enhance_process, inputs=None, outputs=[text_prompt], show_api=False)
+
+# MARK: Gradio LAUNCH
+demo.launch(show_api=True)

requirements.txt

@@ -1,4 +1,6 @@
-gradio
-numpy
-groq
-exif
+gradio
+numpy
+groq
+exif
+spaces
+huggingface-hub