Upload 5 files

_res/_custom.css

@@ -0,0 +1,524 @@
+:root {
+    --name: soft;
+    --primary-50: #fdf2f8;
+    --primary-100: #fce7f3;
+    --primary-200: #fbcfe8;
+    --primary-300: #f9a8d4;
+    --primary-400: #f472b6;
+    --primary-500: #ec4899;
+    --primary-600: #db2777;
+    --primary-700: #be185d;
+    --primary-800: #9d174d;
+    --primary-900: #831843;
+    --primary-950: #6e1a3d;
+    --secondary-50: #eef2ff;
+    --secondary-100: #e0e7ff;
+    --secondary-200: #c7d2fe;
+    --secondary-300: #a5b4fc;
+    --secondary-400: #818cf8;
+    --secondary-500: #6366f1;
+    --secondary-600: #4f46e5;
+    --secondary-700: #4338ca;
+    --secondary-800: #3730a3;
+    --secondary-900: #312e81;
+    --secondary-950: #2b2c5e;
+    --neutral-50: #f9fafb;
+    --neutral-100: #f3f4f6;
+    --neutral-200: #e5e7eb;
+    --neutral-300: #d1d5db;
+    --neutral-400: #9ca3af;
+    --neutral-500: #6b7280;
+    --neutral-600: #4b5563;
+    --neutral-700: #374151;
+    --neutral-800: #1f2937;
+    --neutral-900: #111827;
+    --neutral-950: #0b0f19;
+    --spacing-xxs: 1px;
+    --spacing-xs: 2px;
+    --spacing-sm: 4px;
+    --spacing-md: 6px;
+    --spacing-lg: 8px;
+    --spacing-xl: 10px;
+    --spacing-xxl: 16px;
+    --radius-xxs: 1px;
+    --radius-xs: 1px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+    --radius-xxl: 12px;
+    --text-xxs: 9px;
+    --text-xs: 10px;
+    --text-sm: 12px;
+    --text-md: 14px;
+    --text-lg: 16px;
+    --text-xl: 22px;
+    --text-xxl: 26px;
+    --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
+    --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
+    --body-background-fill: var(--background-fill-primary);
+    --body-text-color: var(--neutral-800);
+    --body-text-size: var(--text-md);
+    --body-text-weight: 400;
+    --embed-radius: var(--radius-lg);
+    --color-accent: var(--primary-500);
+    --color-accent-soft: var(--primary-50);
+    --background-fill-primary: var(--neutral-50);
+    --background-fill-secondary: var(--neutral-50);
+    --border-color-accent: var(--primary-300);
+    --border-color-primary: var(--neutral-200);
+    --link-text-color: var(--secondary-600);
+    --link-text-color-active: var(--secondary-600);
+    --link-text-color-hover: var(--secondary-700);
+    --link-text-color-visited: var(--secondary-500);
+    --body-text-color-subdued: var(--neutral-400);
+    --accordion-text-color: var(--body-text-color);
+    --table-text-color: var(--body-text-color);
+    --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
+    --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
+    --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
+    --shadow-spread: 6px;
+    --block-background-fill: white;
+    --block-border-color: var(--border-color-primary);
+    --block-border-width: 0px;
+    --block-info-text-color: var(--body-text-color-subdued);
+    --block-info-text-size: var(--text-sm);
+    --block-info-text-weight: 400;
+    --block-label-background-fill: var(--primary-100);
+    --block-label-border-color: var(--border-color-primary);
+    --block-label-border-width: 1px;
+    --block-label-shadow: var(--block-shadow);
+    --block-label-text-color: var(--primary-500);
+    --block-label-margin: var(--spacing-md);
+    --block-label-padding: var(--spacing-sm) var(--spacing-md);
+    --block-label-radius: var(--radius-md);
+    --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
+    --block-label-text-size: var(--text-md);
+    --block-label-text-weight: 600;
+    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+    --block-radius: var(--radius-lg);
+    --block-shadow: none;
+    --block-title-background-fill: var(--block-label-background-fill);
+    --block-title-border-color: none;
+    --block-title-border-width: 0px;
+    --block-title-text-color: var(--primary-500);
+    --block-title-padding: var(--block-label-padding);
+    --block-title-radius: var(--block-label-radius);
+    --block-title-text-size: var(--text-md);
+    --block-title-text-weight: 600;
+    --container-radius: var(--radius-lg);
+    --form-gap-width: 0px;
+    --layout-gap: var(--spacing-xxl);
+    --panel-background-fill: var(--background-fill-secondary);
+    --panel-border-color: var(--border-color-primary);
+    --panel-border-width: 1px;
+    --section-header-text-size: var(--text-md);
+    --section-header-text-weight: 400;
+    --border-color-accent-subdued: var(--border-color-accent);
+    --code-background-fill: var(--neutral-100);
+    --checkbox-background-color: var(--background-fill-primary);
+    --checkbox-background-color-focus: var(--checkbox-background-color);
+    --checkbox-background-color-hover: var(--checkbox-background-color);
+    --checkbox-background-color-selected: var(--primary-600);
+    --checkbox-border-color: var(--neutral-100);
+    --checkbox-border-color-focus: var(--primary-500);
+    --checkbox-border-color-hover: var(--neutral-300);
+    --checkbox-border-color-selected: var(--primary-600);
+    --checkbox-border-radius: var(--radius-sm);
+    --checkbox-border-width: 1px;
+    --checkbox-label-background-fill: var(--button-secondary-background-fill);
+    --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
+    --checkbox-label-background-fill-selected: var(--primary-500);
+    --checkbox-label-border-color: var(--border-color-primary);
+    --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
+    --checkbox-label-border-width: var(--input-border-width);
+    --checkbox-label-gap: var(--spacing-lg);
+    --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+    --checkbox-label-shadow: var(--shadow-drop-lg);
+    --checkbox-label-text-size: var(--text-md);
+    --checkbox-label-text-weight: 400;
+    --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    --checkbox-shadow: none;
+    --checkbox-label-text-color: var(--body-text-color);
+    --checkbox-label-text-color-selected: white;
+    --error-background-fill: #fef2f2;
+    --error-border-color: #b91c1c;
+    --error-border-width: 1px;
+    --error-text-color: #b91c1c;
+    --error-icon-color: #b91c1c;
+    --input-background-fill: white;
+    --input-background-fill-focus: var(--secondary-500);
+    --input-background-fill-hover: var(--input-background-fill);
+    --input-border-color: var(--neutral-50);
+    --input-border-color-focus: var(--secondary-300);
+    --input-border-color-hover: var(--input-border-color);
+    --input-border-width: 0px;
+    --input-padding: var(--spacing-xl);
+    --input-placeholder-color: var(--neutral-400);
+    --input-radius: var(--radius-lg);
+    --input-shadow: var(--shadow-drop);
+    --input-shadow-focus: var(--shadow-drop-lg);
+    --input-text-size: var(--text-md);
+    --input-text-weight: 400;
+    --loader-color: var(--color-accent);
+    --prose-text-size: var(--text-md);
+    --prose-text-weight: 400;
+    --prose-header-text-weight: 600;
+    --slider-color: var(--primary-500);
+    --stat-background-fill: var(--primary-300);
+    --table-border-color: var(--neutral-300);
+    --table-even-background-fill: white;
+    --table-odd-background-fill: var(--neutral-50);
+    --table-radius: var(--radius-lg);
+    --table-row-focus: var(--color-accent-soft);
+    --button-border-width: var(--input-border-width);
+    --button-cancel-background-fill: var(--button-secondary-background-fill);
+    --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
+    --button-cancel-border-color: var(--button-secondary-border-color);
+    --button-cancel-border-color-hover: var(--button-cancel-border-color);
+    --button-cancel-text-color: var(--button-secondary-text-color);
+    --button-cancel-text-color-hover: var(--button-cancel-text-color);
+    --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+    --button-large-radius: var(--radius-lg);
+    --button-large-text-size: var(--text-lg);
+    --button-large-text-weight: 600;
+    --button-primary-background-fill: var(--primary-500);
+    --button-primary-background-fill-hover: var(--primary-400);
+    --button-primary-border-color: var(--primary-200);
+    --button-primary-border-color-hover: var(--button-primary-border-color);
+    --button-primary-text-color: white;
+    --button-primary-text-color-hover: var(--button-primary-text-color);
+    --button-secondary-background-fill: white;
+    --button-secondary-background-fill-hover: var(--neutral-100);
+    --button-secondary-border-color: var(--neutral-200);
+    --button-secondary-border-color-hover: var(--button-secondary-border-color);
+    --button-secondary-text-color: var(--neutral-800);
+    --button-secondary-text-color-hover: var(--button-secondary-text-color);
+    --button-shadow: var(--shadow-drop-lg);
+    --button-shadow-active: var(--shadow-inset);
+    --button-shadow-hover: var(--shadow-drop-lg);
+    --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
+    --button-small-radius: var(--radius-lg);
+    --button-small-text-size: var(--text-md);
+    --button-small-text-weight: 400;
+    --button-transition: background-color 0.2s ease;
+}
+
+.dark {
+    --body-background-fill: var(--background-fill-primary);
+    --body-text-color: var(--neutral-100);
+    --color-accent-soft: var(--neutral-700);
+    --background-fill-primary: var(--neutral-950);
+    --background-fill-secondary: var(--neutral-900);
+    --border-color-accent: var(--neutral-600);
+    --border-color-primary: var(--neutral-700);
+    --link-text-color-active: var(--secondary-500);
+    --link-text-color: var(--secondary-500);
+    --link-text-color-hover: var(--secondary-400);
+    --link-text-color-visited: var(--secondary-600);
+    --body-text-color-subdued: var(--neutral-400);
+    --accordion-text-color: var(--body-text-color);
+    --table-text-color: var(--body-text-color);
+    --shadow-spread: 1px;
+    --block-background-fill: var(--neutral-800);
+    --block-border-color: var(--border-color-primary);
+    --block_border_width: None;
+    --block-info-text-color: var(--body-text-color-subdued);
+    --block-label-background-fill: var(--primary-600);
+    --block-label-border-color: var(--border-color-primary);
+    --block_label_border_width: None;
+    --block-label-text-color: white;
+    --block_shadow: None;
+    --block_title_background_fill: None;
+    --block_title_border_color: None;
+    --block_title_border_width: None;
+    --block-title-text-color: white;
+    --panel-background-fill: var(--background-fill-secondary);
+    --panel-border-color: var(--border-color-primary);
+    --panel_border_width: None;
+    --border-color-accent-subdued: var(--border-color-accent);
+    --code-background-fill: var(--neutral-800);
+    --checkbox-background-color: var(--neutral-800);
+    --checkbox-background-color-focus: var(--checkbox-background-color);
+    --checkbox-background-color-hover: var(--checkbox-background-color);
+    --checkbox-background-color-selected: var(--primary-700);
+    --checkbox-border-color: var(--neutral-600);
+    --checkbox-border-color-focus: var(--primary-600);
+    --checkbox-border-color-hover: var(--neutral-600);
+    --checkbox-border-color-selected: var(--primary-700);
+    --checkbox-border-width: var(--input-border-width);
+    --checkbox-label-background-fill: var(--button-secondary-background-fill);
+    --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
+    --checkbox-label-background-fill-selected: var(--primary-600);
+    --checkbox-label-border-color: var(--border-color-primary);
+    --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
+    --checkbox-label-border-width: var(--input-border-width);
+    --checkbox-label-text-color: var(--body-text-color);
+    --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
+    --error-background-fill: var(--background-fill-primary);
+    --error-border-color: #ef4444;
+    --error_border_width: None;
+    --error-text-color: #fef2f2;
+    --error-icon-color: #ef4444;
+    --input-background-fill: var(--neutral-700);
+    --input-background-fill-focus: var(--secondary-600);
+    --input-background-fill-hover: var(--input-background-fill);
+    --input-border-color: var(--border-color-primary);
+    --input-border-color-focus: var(--neutral-700);
+    --input-border-color-hover: var(--input-border-color);
+    --input_border_width: None;
+    --input-placeholder-color: var(--neutral-500);
+    --input_shadow: None;
+    --input_shadow_focus: None;
+    --loader_color: None;
+    --slider-color: var(--primary-600);
+    --stat-background-fill: var(--primary-500);
+    --table-border-color: var(--neutral-700);
+    --table-even-background-fill: var(--neutral-950);
+    --table-odd-background-fill: var(--neutral-900);
+    --table-row-focus: var(--color-accent-soft);
+    --button-border-width: var(--input-border-width);
+    --button-cancel-background-fill: var(--button-secondary-background-fill);
+    --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
+    --button-cancel-border-color: var(--button-secondary-border-color);
+    --button-cancel-border-color-hover: var(--button-cancel-border-color);
+    --button-cancel-text-color: var(--button-secondary-text-color);
+    --button-cancel-text-color-hover: var(--button-cancel-text-color);
+    --button-primary-background-fill: var(--primary-700);
+    --button-primary-background-fill-hover: var(--primary-500);
+    --button-primary-border-color: var(--primary-600);
+    --button-primary-border-color-hover: var(--button-primary-border-color);
+    --button-primary-text-color: white;
+    --button-primary-text-color-hover: var(--button-primary-text-color);
+    --button-secondary-background-fill: var(--neutral-600);
+    --button-secondary-background-fill-hover: var(--primary-500);
+    --button-secondary-border-color: var(--neutral-600);
+    --button-secondary-border-color-hover: var(--button-secondary-border-color);
+    --button-secondary-text-color: white;
+    --button-secondary-text-color-hover: var(--button-secondary-text-color);
+    --name: soft;
+    --primary-50: #fdf2f8;
+    --primary-100: #fce7f3;
+    --primary-200: #fbcfe8;
+    --primary-300: #f9a8d4;
+    --primary-400: #f472b6;
+    --primary-500: #ec4899;
+    --primary-600: #db2777;
+    --primary-700: #be185d;
+    --primary-800: #9d174d;
+    --primary-900: #831843;
+    --primary-950: #6e1a3d;
+    --secondary-50: #eef2ff;
+    --secondary-100: #e0e7ff;
+    --secondary-200: #c7d2fe;
+    --secondary-300: #a5b4fc;
+    --secondary-400: #818cf8;
+    --secondary-500: #6366f1;
+    --secondary-600: #4f46e5;
+    --secondary-700: #4338ca;
+    --secondary-800: #3730a3;
+    --secondary-900: #312e81;
+    --secondary-950: #2b2c5e;
+    --neutral-50: #f9fafb;
+    --neutral-100: #f3f4f6;
+    --neutral-200: #e5e7eb;
+    --neutral-300: #d1d5db;
+    --neutral-400: #9ca3af;
+    --neutral-500: #6b7280;
+    --neutral-600: #4b5563;
+    --neutral-700: #374151;
+    --neutral-800: #1f2937;
+    --neutral-900: #111827;
+    --neutral-950: #0b0f19;
+    --spacing-xxs: 1px;
+    --spacing-xs: 2px;
+    --spacing-sm: 4px;
+    --spacing-md: 6px;
+    --spacing-lg: 8px;
+    --spacing-xl: 10px;
+    --spacing-xxl: 16px;
+    --radius-xxs: 1px;
+    --radius-xs: 1px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+    --radius-xxl: 12px;
+    --text-xxs: 9px;
+    --text-xs: 10px;
+    --text-sm: 12px;
+    --text-md: 14px;
+    --text-lg: 16px;
+    --text-xl: 22px;
+    --text-xxl: 26px;
+    --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
+    --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
+    --body-text-size: var(--text-md);
+    --body-text-weight: 400;
+    --embed-radius: var(--radius-lg);
+    --color-accent: var(--primary-500);
+    --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
+    --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
+    --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
+    --block-border-width: 0px;
+    --block-info-text-size: var(--text-sm);
+    --block-info-text-weight: 400;
+    --block-label-border-width: 1px;
+    --block-label-shadow: var(--block-shadow);
+    --block-label-margin: var(--spacing-md);
+    --block-label-padding: var(--spacing-sm) var(--spacing-md);
+    --block-label-radius: var(--radius-md);
+    --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
+    --block-label-text-size: var(--text-md);
+    --block-label-text-weight: 600;
+    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+    --block-radius: var(--radius-lg);
+    --block-shadow: none;
+    --block-title-background-fill: var(--block-label-background-fill);
+    --block-title-border-color: none;
+    --block-title-border-width: 0px;
+    --block-title-padding: var(--block-label-padding);
+    --block-title-radius: var(--block-label-radius);
+    --block-title-text-size: var(--text-md);
+    --block-title-text-weight: 600;
+    --container-radius: var(--radius-lg);
+    --form-gap-width: 0px;
+    --layout-gap: var(--spacing-xxl);
+    --panel-border-width: 1px;
+    --section-header-text-size: var(--text-md);
+    --section-header-text-weight: 400;
+    --checkbox-border-radius: var(--radius-sm);
+    --checkbox-label-gap: var(--spacing-lg);
+    --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+    --checkbox-label-shadow: var(--shadow-drop-lg);
+    --checkbox-label-text-size: var(--text-md);
+    --checkbox-label-text-weight: 400;
+    --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    --checkbox-shadow: none;
+    --error-border-width: 1px;
+    --input-border-width: 0px;
+    --input-padding: var(--spacing-xl);
+    --input-radius: var(--radius-lg);
+    --input-shadow: var(--shadow-drop);
+    --input-shadow-focus: var(--shadow-drop-lg);
+    --input-text-size: var(--text-md);
+    --input-text-weight: 400;
+    --loader-color: var(--color-accent);
+    --prose-text-size: var(--text-md);
+    --prose-text-weight: 400;
+    --prose-header-text-weight: 600;
+    --table-radius: var(--radius-lg);
+    --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+    --button-large-radius: var(--radius-lg);
+    --button-large-text-size: var(--text-lg);
+    --button-large-text-weight: 600;
+    --button-shadow: var(--shadow-drop-lg);
+    --button-shadow-active: var(--shadow-inset);
+    --button-shadow-hover: var(--shadow-drop-lg);
+    --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
+    --button-small-radius: var(--radius-lg);
+    --button-small-text-size: var(--text-md);
+    --button-small-text-weight: 400;
+    --button-transition: background-color 0.2s ease;
+}
+
+body>gradio-app {
+    background: var(--primary-950);
+    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important;
+    padding-top: 120px;
+    min-widh: 900px;
+}
+
+gradio-app .gradio-container {
+    max-width: 80% !important;
+}
+
+div.tabs>div.tab-nav>button.selected {
+    border-width: 0 !important;
+    background: var(--primary-600) !important;
+    color: var(--neutral-950);
+    font-weight: 600;
+}
+
+div.tabs>div.tab-nav {
+    border-bottom: none !important;
+    padding: 0 0.25rem 0 0.25rem !important;
+}
+
+div.tabs div.tabitem {
+    background-color: var(--neutral-900) !important;
+    border-width: 0 !important;
+    border-top: 8px solid var(--primary-600) !important;
+    border-radius: var(--container-radius) !important;
+}
+
+.top-description h1 {
+    color: var(--neutral-400);
+    font-size: 2rem;
+}
+
+.prompt-input textarea {
+    font-size: 1.2rem;
+    color: var(--neutral-300);
+}
+
+.ratio_buttons_wrapper {
+    display: flex !important;
+    flex-grow: 0 !important;
+    min-width: min(48px, 30%) !important;
+    flex: 1 1 0%;
+    flex-wrap: nowrap;
+}
+
+.image_size_selctor_wrapper {
+    flex-grow: 2 !important;
+    min-width: min(120px, 10%) !important;
+}
+
+.info-text-wrapper {
+    padding: calc(var(--spacing-xl) / 2) calc(var(--spacing-xl) + 2px);
+}
+
+span.info-text {
+    margin-bottom: var(--spacing-lg);
+    color: var(--block-info-text-color);
+    font-weight: var(--block-info-text-weight);
+    font-size: var(--block-info-text-size);
+    line-height: var(--line-sm);
+}
+
+.image-input-read-exfi {
+    max-height: 120px;
+}
+
+.image-input-read-exfi>button {
+    transform: scale(.8);
+}
+
+.image-ratio-buttons {
+    & label input {
+        display: none;
+    }
+
+    &label span {
+        margin-left: 0;
+    }
+}
+
+.switch-ratio-btn {
+    max-width: 38px;
+    min-width: 38px !important;
+    height: 33px;
+}
+
+/* .image-height-selector {
+    & div.head {
+        justify-content: end;
+    }
+
+    & label {
+        display: none;
+    }
+} */

_res/groq_systemmessage_prompt_enhance.json

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

_res/javascript.js

@@ -0,0 +1,24 @@
+//component-15
+const tabNav = document.querySelector("#component-153 > div.tab-nav.svelte-1uw5tnk")
+//const tabNav = document.querySelector('.tab-nav');
+tabNav.addEventListener("wheel", (event) => {
+	event.preventDefault()
+	const scrollLeft = tabNav.scrollLeft + event.deltaY
+	tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
+})
+
+tabNav.addEventListener("mouseover", () => {
+	tabNav.addEventListener("wheel", (event) => {
+		event.preventDefault()
+		const scrollLeft = tabNav.scrollLeft + event.deltaY
+		tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
+	})
+})
+
+tabNav.addEventListener("mouseout", () => {
+	tabNav.removeEventListener("wheel", (event) => {
+		event.preventDefault()
+		const scrollLeft = tabNav.scrollLeft + event.deltaY
+		tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
+	})
+})

app.py

@@ -0,0 +1,220 @@
+import os, sys, json, re, base64, random, requests, shutil
+import gradio as gr
+from datetime import datetime
+import urllib.parse
+from groq import Groq
+from exif import Image
+from PIL import Image as PILImage
+import colorsys
+
+MAX_SEED = 9999
+MAX_IMAGE_SIZE = 2048
+
+GROQ_APIKEY_PROMPTENHANCE = os.environ["GROQ_APIKEY_PROMPTENHANCE"]
+
+
+# delete cache folder if exist and create new
+CACHE_DIR = os.path.join(os.path.dirname(__file__), "cache")
+IMAGE_DIR = os.path.join(CACHE_DIR, "images")
+if os.path.exists(CACHE_DIR):
+    shutil.rmtree(CACHE_DIR)
+os.makedirs(CACHE_DIR)
+os.makedirs(IMAGE_DIR)
+
+RES = os.path.join(os.path.dirname(__file__), "_res")
+
+custom_css = RES + "/_custom.css"
+custom_js = RES + "/_custom.js"
+
+
+title = "Pollinations Image Generator"
+description = "Pollinations API + Randomizer"
+
+
+theme = gr.themes.Soft(
+    primary_hue="amber",
+    radius_size="sm",
+)
+
+
+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
+
+
+def groq_enhance_process(Prompt):
+    client = Groq(api_key=GROQ_APIKEY_PROMPTENHANCE)
+
+    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=8000,
+        top_p=0.9,
+        stream=False,
+        stop=None,
+    )
+
+    if completion.choices[0].message.content != "":
+        enhanced_prompt = completion.choices[0].message.content
+
+    return enhanced_prompt
+
+
+def enhance_process(Prompt):
+    encode_prompt = urllib.parse.quote(Prompt)
+    request_url = f"https://image.pollinations.ai/prompt/{encode_prompt}?model=turbo&width=512&height=512&nologo=true&enhance=true&nofeed=true"
+    print(request_url)
+    response = requests.get(request_url)
+    if response.status_code == 200:
+        filename = datetime.now().strftime("%Y-%m-%d_%H-%M-%S") + ".png"
+        file_path = os.path.join(CACHE_DIR, filename)
+        with open(file_path, "wb") as f:
+            f.write(response.content)
+        img_exif_comment = read_exif(file_path)
+        prompt_value = img_exif_comment.get("prompt", "")
+        prompt_value = prompt_value.replace(Prompt, "").strip()
+        print(prompt_value)
+        return prompt_value
+
+
+def image_get_colors(image_path):
+    img = PILImage.open(image_path)
+    img = img.convert("RGB")
+    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]
+    print(dominant_color_rgb)
+
+    return dominant_color_rgb
+
+
+def process(Prompt, image_width, image_height, image_seed, randomize_seed):
+
+    used_seed = random.randint(0, MAX_SEED) if image_seed == 0 or randomize_seed else image_seed
+
+    timestamp = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")
+    filename = timestamp + ".png"
+    # file_path = os.path.join(filename_dir, filename)
+    file_path = os.path.join(IMAGE_DIR, filename)
+
+    encode_prompt = urllib.parse.quote(Prompt)
+    request_url = f"https://image.pollinations.ai/prompt/{encode_prompt}?model=flux&width={image_width}&height={image_height}&nologo=true&enhance=false&nofeed=true&seed={used_seed}"
+    print(request_url)
+    response = requests.get(request_url)
+    if response.status_code == 200:
+        with open(file_path, "wb") as f:
+            f.write(response.content)
+
+        img_exif_comment = read_exif(file_path)
+        img_dominant_color = image_get_colors(file_path)
+
+        return ({"value": file_path, "__type__": "update"}, {"value": request_url, "visible": True, "__type__": "update"}, used_seed, img_exif_comment, {"visible": True, "__type__": "update"}, {"value": Prompt, "visible": True, "__type__": "update"}, {"value": file_path, "visible": True, "__type__": "update"})
+
+
+with gr.Blocks(theme=theme, css=custom_css) as demo:
+    with gr.Tab("Image Generator"):
+        with gr.Row():
+            with gr.Column(scale=1):
+                with gr.Row():
+                    text_prompt = gr.Textbox(label="Prompt", show_label=False, lines=12, max_lines=18, placeholder="Enter your Image prompt here...", elem_classes="prompt-input", autofocus=True)
+                with gr.Row():
+                    with gr.Column(scale=2, elem_classes="image_size_selctor_wrapper"):
+                        image_width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, value=1024, step=128, elem_classes="image-width-selector")
+                        image_height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, value=683, step=128, elem_classes="image-height-selector")
+                        # with gr.Row():
+                        #     image_ratio_buttons = gr.Radio(["16:9", "4:3", "3:2", "1:1"], value="3:2", label="Bild Größe", interactive=True, elem_classes="image-ratio-buttons", container=True, show_label=False)
+                        #     switch_width_height = gr.Button("🔁", size="sm", elem_id="switchRatioBtn", elem_classes="switch-ratio-btn", variant="primary")
+                with gr.Row():
+                    with gr.Column():
+                        image_seed = gr.Slider(label="Seed", minimum=0, step=1, value=42, maximum=MAX_SEED)
+                        randomize_seed = gr.Checkbox(label="Randomize seed", value=False)
+                with gr.Row():
+                    run_button = gr.Button("Erstellen", variant="primary", elem_classes="run_button")
+                    enhance_button = gr.Button("Prompt verbessern", variant="secondary", elem_classes="enhance-button")
+
+            with gr.Column(scale=3):
+                with gr.Row():
+                    with gr.Column(scale=3):
+                        output_image = gr.Image(show_label=False, height=720)
+                    with gr.Column(scale=1):
+                        image_informations = gr.Markdown("""## Bildinformationen""", visible=False)
+                        # textbox_your_prompt = gr.Textbox(label="Dein Prmopt", lines=2, max_lines=4, interactive=False, show_copy_button=True)
+                        textbox_prompt = gr.Textbox("Bild Prompt", lines=4, max_lines=8, interactive=False, show_copy_button=True, visible=False)
+                        image_download_button = gr.DownloadButton("Bild herunterladen", value=None, elem_classes="download-button", variant="Primary", visible=False)
+
+                # output_image = gr.Gallery(label="Generated images", show_label=False, elem_id="gallery", columns=[1], rows=[1], object_fit="contain", height="768")
+                output_url = gr.Textbox(label="Output URL", show_label=True, interactive=False, show_copy_button=True, visible=False)
+                outpu_image_comment = gr.Json(visible=False)
+                # output_image = gr.Image(label="Generated image", show_label=True, height=720, show_share_button=False)
+                # gallery = gr.Gallery(label="Generated Gallery", show_label=True, elem_id="gallery", columns=[3], rows=[1], object_fit="contain", height="auto", type="filepath")
+                # testimage = gr.Image(value="images/2024-08-22/2024-08-22_00-45-31.png", type="pil")
+                # gr.HTML("<div>")
+                # for image_path in os.listdir(images_dir):
+                #     gr.HTML(f'<img src="images/2024-08-21/{image_path}" />')
+                # gr.HTML("</div>")
+
+        def switch_image_size_values(image_width, image_height):
+            return image_height, image_width
+
+        switch_width_height.click(fn=switch_image_size_values, inputs=[image_width, image_height], outputs=[image_width, image_height])
+
+        run_button.click(fn=process, inputs=[text_prompt, image_width, image_height, image_seed, randomize_seed], outputs=[output_image, output_url, image_seed, outpu_image_comment, image_informations, textbox_prompt, image_download_button])
+        enhance_button.click(fn=groq_enhance_process, inputs=[text_prompt], outputs=[text_prompt])
+
+demo.launch()
+
+"""
+    ## Endpoint
+    GET https://image.pollinations.ai/prompt/{prompt}
+
+    ## Description
+    This endpoint generates an image based on the provided prompt and optional parameters. It returns a raw image file.
+
+    ## Parameters
+    - prompt (required): The text description of the image you want to generate. Should be URL-encoded.
+    - model (optional): The model to use for generation. Options: 'flux' or 'turbo'. Default: 'turbo'
+    - seed (optional): Seed for reproducible results. Default: random
+    - width (optional): Width of the generated image. Default: 1024
+    - height (optional): Height of the generated image. Default: 1024
+    - nologo (optional): Set to 'true' to turn off the rendering of the logo
+    - nofeed (optional): Set to 'true' to prevent the image from appearing in the public feed
+    - enhance (optional): Set to 'true' or 'false' to turn on or off prompt enhancing (passes prompts through an LLM to add detail)
+
+    ## Example Usage
+    https://image.pollinations.ai/prompt/A%20beautiful%20sunset%20over%20the%20ocean?model=flux&width=1280&height=720&seed=42&nologo=true&enhance=true
+
+    ## Response
+    The API returns a raw image file (typically JPEG or PNG) as the response body.
+    """

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+numpy
+groq