Create ui_components.py

ui_components.py

@@ -0,0 +1,1135 @@
+# AI Image Creator: Enhanced UI and UX
+# Part 2: Enhanced UI Components and Styling
+
+# CSS for styling the interface - Comprehensive styling for modern UI
+css = """
+/* Main theme colors with CSS variables for better customization */
+:root {
+    --primary-color: #4F46E5;
+    --primary-hover: #4338CA;
+    --secondary-color: #7C3AED;
+    --secondary-hover: #6D28D9;
+    --background-color: #F8FAFC;
+    --card-color: #FFFFFF;
+    --text-color: #1E293B;
+    --text-muted: #64748B;
+    --accent-color: #3B82F6;
+    --success-color: #10B981;
+    --success-hover: #059669;
+    --warning-color: #F59E0B;
+    --error-color: #EF4444;
+    --error-hover: #DC2626;
+    --border-color: #E2E8F0;
+    --border-hover: #CBD5E1;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --radius-sm: 0.375rem;
+    --radius: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Global styles and resets */
+body, html {
+    font-family: var(--font-sans);
+    color: var(--text-color);
+    background-color: var(--background-color);
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+}
+
+/* Container with responsive padding */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+@media (max-width: 640px) {
+    .container {
+        padding: 0.5rem;
+    }
+}
+
+/* Card styling with elevation and hover effects */
+.gr-panel {
+    border-radius: var(--radius) !important;
+    border: 1px solid var(--border-color) !important;
+    box-shadow: var(--shadow) !important;
+    overflow: hidden;
+    transition: transform 0.2s, box-shadow 0.2s;
+    background-color: var(--card-color) !important;
+}
+
+.gr-panel:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg) !important;
+}
+
+/* Button styling with gradient and hover states */
+button.primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: var(--radius) !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.025em !important;
+    padding: 0.75rem 1.5rem !important;
+    transition: all 0.3s ease !important;
+    box-shadow: var(--shadow-sm) !important;
+    outline: none !important;
+    text-transform: none !important;
+}
+
+button.primary:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow) !important;
+    opacity: 0.9;
+}
+
+button.primary:active {
+    transform: translateY(0);
+    opacity: 0.8;
+}
+
+button.primary[disabled], button.primary[disabled]:hover {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Secondary button styling */
+button.secondary {
+    background-color: transparent !important;
+    color: var(--primary-color) !important;
+    border: 1px solid var(--primary-color) !important;
+    border-radius: var(--radius) !important;
+    font-weight: 500 !important;
+    padding: 0.625rem 1.25rem !important;
+    transition: all 0.2s ease !important;
+    text-transform: none !important;
+}
+
+button.secondary:hover {
+    background-color: rgba(79, 70, 229, 0.05) !important;
+    border-color: var(--primary-hover) !important;
+}
+
+/* Style for the example buttons */
+.example-button {
+    font-size: 0.875rem !important;
+    padding: 0.5rem 0.75rem !important;
+    background-color: transparent !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius) !important;
+    transition: all 0.2s !important;
+    text-align: left !important;
+    justify-content: flex-start !important;
+    height: auto !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+    color: var(--text-color) !important;
+}
+
+.example-button:hover {
+    background-color: rgba(79, 70, 229, 0.05) !important;
+    border-color: var(--primary-color) !important;
+    transform: translateY(-1px);
+}
+
+/* Form controls styling */
+.gr-input, .gr-textarea, .gr-dropdown {
+    border-radius: var(--radius) !important;
+    border: 1px solid var(--border-color) !important;
+    transition: border-color 0.2s, box-shadow 0.2s !important;
+    font-family: var(--font-sans) !important;
+    color: var(--text-color) !important;
+}
+
+.gr-input:focus, .gr-textarea:focus, .gr-dropdown:focus-within {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
+    outline: none !important;
+}
+
+.gr-form {
+    gap: 1rem !important;
+}
+
+.gr-input-label, .gr-dropdown-label, .gr-textarea-label, .gr-checkbox-label, .gr-radio-label {
+    font-size: 0.875rem !important;
+    font-weight: 500 !important;
+    color: var(--text-color) !important;
+    margin-bottom: 0.25rem !important;
+}
+
+/* Input placeholder styling */
+.gr-input::placeholder, .gr-textarea::placeholder {
+    color: var(--text-muted) !important;
+    opacity: 0.7;
+}
+
+/* Input and textarea styling */
+textarea, input[type="text"] {
+    border-radius: var(--radius) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 0.75rem 1rem !important;
+    transition: border-color 0.2s, box-shadow 0.2s !important;
+    font-family: var(--font-sans) !important;
+}
+
+textarea:focus, input[type="text"]:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
+    outline: none !important;
+}
+
+/* Dropdown styling */
+.gr-dropdown {
+    border-radius: var(--radius) !important;
+    border: 1px solid var(--border-color) !important;
+    background-color: var(--card-color) !important;
+}
+
+.gr-dropdown > div {
+    border-radius: var(--radius) !important;
+    min-height: 38px !important;
+}
+
+.gr-dropdown > div > span {
+    font-size: 0.9375rem !important;
+}
+
+/* Dropdown menu styling */
+.gr-dropdown ul {
+    background-color: var(--card-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius) !important;
+    box-shadow: var(--shadow) !important;
+}
+
+.gr-dropdown ul li {
+    padding: 0.5rem 0.75rem !important;
+}
+
+.gr-dropdown ul li:hover {
+    background-color: rgba(79, 70, 229, 0.05) !important;
+}
+
+/* Custom header with gradient background */
+.app-header {
+    text-align: center;
+    padding: 1.75rem 1rem;
+    margin-bottom: 2rem;
+    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.08));
+    border-radius: var(--radius-lg);
+    border-bottom: 3px solid var(--primary-color);
+    position: relative;
+    overflow: hidden;
+}
+
+.app-header::before {
+    content: '';
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    right: -50px;
+    height: 100px;
+    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(124, 58, 237, 0.2));
+    transform: rotate(-5deg);
+    z-index: 0;
+}
+
+.app-header h1 {
+    font-size: 2.5rem !important;
+    font-weight: 800 !important;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem !important;
+    position: relative;
+    z-index: 1;
+}
+
+.app-header p {
+    font-size: 1.25rem !important;
+    color: var(--text-color);
+    opacity: 0.8;
+    max-width: 40rem;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+}
+
+/* Responsive header */
+@media (max-width: 640px) {
+    .app-header h1 {
+        font-size: 2rem !important;
+    }
+    
+    .app-header p {
+        font-size: 1rem !important;
+    }
+}
+
+/* Examples gallery with grid layout */
+.example-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+.example-item {
+    border-radius: var(--radius);
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: all 0.2s;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--card-color);
+}
+
+.example-item:hover {
+    transform: translateY(-2px);
+    border-color: var(--accent-color);
+    box-shadow: var(--shadow);
+}
+
+.example-item:active {
+    transform: translateY(0);
+}
+
+.example-item-image {
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    font-size: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.example-item-caption {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1.25;
+    color: var(--text-color);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+/* Loading indicator with animation */
+.loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 1000;
+    backdrop-filter: blur(2px);
+    border-radius: var(--radius);
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(79, 70, 229, 0.2);
+    border-radius: 50%;
+    border-top-color: var(--primary-color);
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Info cards with subtle styling */
+.info-card {
+    background-color: var(--card-color);
+    border-radius: var(--radius);
+    padding: 1rem;
+    border: 1px solid var(--border-color);
+    margin-bottom: 1rem;
+    transition: all 0.2s;
+}
+
+.info-card:hover {
+    border-color: var(--border-hover);
+    box-shadow: var(--shadow-sm);
+}
+
+.info-card h3 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.info-card p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+/* Model info panel with branded styling */
+.model-info {
+    background-color: rgba(79, 70, 229, 0.05);
+    border-left: 3px solid var(--primary-color);
+    padding: 0.75rem 1rem;
+    border-radius: 0 var(--radius) var(--radius) 0;
+    margin: 1rem 0;
+}
+
+.model-info h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.model-info p {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.875rem;
+    color: var(--text-color);
+}
+
+.model-info .model-id {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-family: monospace;
+    background-color: rgba(0, 0, 0, 0.03);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+    word-break: break-all;
+}
+
+/* Parameter pills for displaying selections */
+.parameter-pill {
+    display: inline-flex;
+    align-items: center;
+    background-color: rgba(79, 70, 229, 0.1);
+    color: var(--primary-color);
+    border-radius: 16px;
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    user-select: none;
+}
+
+.parameter-pill .icon {
+    margin-right: 0.25rem;
+}
+
+/* Badge for showing model speed/quality */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+}
+
+.badge-success {
+    background-color: rgba(16, 185, 129, 0.1);
+    color: var(--success-color);
+}
+
+.badge-warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: var(--warning-color);
+}
+
+.badge-error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: var(--error-color);
+}
+
+.badge-info {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: var(--accent-color);
+}
+
+/* Enhanced accordion styling */
+.gr-accordion {
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius) !important;
+    margin-bottom: 1rem !important;
+    overflow: hidden;
+}
+
+.gr-accordion > div:first-child {
+    padding: 0.75rem 1rem !important;
+    background-color: rgba(0, 0, 0, 0.02) !important;
+    font-weight: 600 !important;
+    color: var(--text-color) !important;
+    font-size: 0.9375rem !important;
+}
+
+.gr-accordion > div:last-child {
+    padding: 1rem !important;
+}
+
+/* Tooltip styling */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: help;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: var(--text-color);
+    color: white;
+    text-align: center;
+    border-radius: var(--radius-sm);
+    padding: 0.5rem 0.75rem;
+    position: absolute;
+    z-index: 1000;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.75rem;
+    box-shadow: var(--shadow);
+    pointer-events: none;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--text-color) transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* History item styling */
+.history-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem;
+    border-radius: var(--radius);
+    margin-bottom: 0.75rem;
+    background-color: var(--card-color);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.history-item:hover {
+    background-color: rgba(79, 70, 229, 0.05);
+    transform: translateY(-1px);
+}
+
+.history-item-image {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+    margin-right: 0.75rem;
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    font-size: 1.25rem;
+}
+
+.history-item-content {
+    flex: 1;
+    overflow: hidden;
+}
+
+.history-item-title {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-color);
+}
+
+.history-item-subtitle {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+/* Tabs styling */
+.tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 1rem;
+}
+
+.tab {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    font-weight: 500;
+    font-size: 0.9375rem;
+    color: var(--text-muted);
+    transition: all 0.2s;
+}
+
+.tab:hover {
+    color: var(--primary-color);
+}
+
+.tab.active {
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+}
+
+/* Progress bar */
+.progress-container {
+    width: 100%;
+    height: 8px;
+    background-color: rgba(79, 70, 229, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 0.5rem 0;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+    width: 0%;
+    transition: width 0.3s ease;
+    border-radius: 4px;
+}
+
+/* Image output container */
+.image-output-container {
+    position: relative;
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: all 0.2s;
+    background-color: #f5f5f5;
+    min-height: 300px;
+}
+
+.image-output-container img {
+    width: 100%;
+    display: block;
+    border-radius: var(--radius);
+}
+
+.image-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    font-size: 1rem;
+    text-align: center;
+    padding: 1rem;
+}
+
+.image-placeholder .icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.6;
+}
+
+/* Image controls overlay */
+.image-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.75rem;
+    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
+    display: flex;
+    justify-content: flex-end;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.image-output-container:hover .image-controls {
+    opacity: 1;
+}
+
+.image-control-button {
+    background-color: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-left: 0.5rem;
+    color: var(--text-color);
+    transition: all 0.2s;
+}
+
+.image-control-button:hover {
+    background-color: white;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+}
+
+/* Character counter */
+.character-counter {
+    text-align: right;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+    transition: color 0.2s;
+}
+
+.character-counter.warning {
+    color: var(--warning-color);
+}
+
+.character-counter.error {
+    color: var(--error-color);
+}
+
+/* Status message */
+.status-message {
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius);
+    margin: 1rem 0;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+}
+
+.status-message .icon {
+    margin-right: 0.75rem;
+    font-size: 1.25rem;
+}
+
+.status-success {
+    background-color: rgba(16, 185, 129, 0.1);
+    color: var(--success-color);
+    border-left: 3px solid var(--success-color);
+}
+
+.status-error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: var(--error-color);
+    border-left: 3px solid var(--error-color);
+}
+
+.status-warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: var(--warning-color);
+    border-left: 3px solid var(--warning-color);
+}
+
+.status-info {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: var(--accent-color);
+    border-left: 3px solid var(--accent-color);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .example-gallery {
+        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    }
+    
+    .gr-panel {
+        padding: 0.75rem !important;
+    }
+    
+    .gr-accordion > div:first-child {
+        padding: 0.625rem 0.75rem !important;
+    }
+    
+    .gr-accordion > div:last-child {
+        padding: 0.75rem !important;
+    }
+    
+    button.primary {
+        padding: 0.625rem 1.25rem !important;
+    }
+}
+"""
+
+# =============== ENHANCED UI COMPONENTS ===============
+
+# Function to create and show application UI
+def create_ui():
+    with gr.Blocks(title="AI Image Creator", css=css) as interface:
+        # Custom header with branding
+        with gr.Row(elem_classes="app-header"):
+            with gr.Column():
+                gr.HTML("""
+                    <h1>🎨 AI Image Creator</h1>
+                    <p>Transform your ideas into stunning images with AI-powered text-to-image generation</p>
+                """)
+        
+        # Main content area
+        with gr.Row(equal_height=False):
+            # Left column - Input controls
+            with gr.Column(scale=1, min_width=380):
+                # Description input with character counter
+                with gr.Group(elem_classes="input-group"):
+                    description_input = gr.Textbox(
+                        label="Describe what you want to see",
+                        placeholder="Be detailed and specific about colors, composition, lighting, and subject...",
+                        lines=4,
+                        max_lines=8,
+                        elem_id="description-input"
+                    )
+                    
+                    # Character counter with dynamic updates
+                    char_counter = gr.HTML(
+                        value="<div class='character-counter'>0 characters</div>",
+                        elem_classes="char-counter-container"
+                    )
+                
+                # Examples gallery with clear visual structure
+                with gr.Group(elem_classes="examples-group"):
+                    gr.HTML("<h3 style='margin-top: 0; font-size: 1rem; margin-bottom: 0.75rem;'>🌟 Try an example:</h3>")
+                    
+                    # Gallery of examples
+                    with gr.Row(elem_classes="example-gallery"):
+                        for i, example in enumerate(EXAMPLE_PROMPTS):
+                            with gr.Column(elem_classes="example-item"):
+                                # Example card with visual element and caption
+                                example_card = gr.Button(
+                                    example["thumbnail_desc"],
+                                    elem_classes="example-button"
+                                )
+                                
+                                # Event handler for example selection
+                                example_card.click(
+                                    fn=lambda idx=i: load_example(idx),
+                                    outputs=[description_input, creation_type, art_style, mood_dropdown]
+                                )
+                
+                # Creation settings with enhanced dropdowns
+                with gr.Group(elem_classes="settings-group"):
+                    gr.HTML("<h3 style='margin-top: 0; font-size: 1rem; margin-bottom: 0.75rem;'>🛠️ Image Settings</h3>")
+                    
+                    # Creation Type and Art Style in one row
+                    with gr.Row():
+                        # Creation type dropdown with icons
+                        creation_type = gr.Dropdown(
+                            choices=format_dropdown_choices(CREATION_TYPES),
+                            value=f"{CREATION_TYPES['Digital Art']['icon']} Digital Art",
+                            label="Creation Type",
+                            elem_classes="enhanced-dropdown"
+                        )
+                        
+                        # Art style dropdown with icons
+                        art_style = gr.Dropdown(
+                            choices=format_dropdown_choices(ART_STYLES),
+                            value=f"{ART_STYLES['Photorealistic']['icon']} Photorealistic",
+                            label="Art Style",
+                            elem_classes="enhanced-dropdown"
+                        )
+                    
+                    # Mood and Model in one row
+                    with gr.Row():
+                        # Mood dropdown with icons
+                        mood_dropdown = gr.Dropdown(
+                            choices=format_dropdown_choices(MOODS),
+                            value=f"{MOODS['Peaceful']['icon']} Peaceful",
+                            label="Mood",
+                            elem_classes="enhanced-dropdown"
+                        )
+                        
+                        # Model selector with display names
+                        formatted_models = [f"{info['icon']} {info['display_name']}" for model_key, info in IMAGE_MODELS.items()]
+                        model_selector = gr.Dropdown(
+                            choices=formatted_models,
+                            value=f"{IMAGE_MODELS['stabilityai/stable-diffusion-xl-base-1.0']['icon']} {IMAGE_MODELS['stabilityai/stable-diffusion-xl-base-1.0']['display_name']}",
+                            label="Model",
+                            elem_classes="enhanced-dropdown"
+                        )
+                
+                # Information panels for selected options
+                with gr.Group(elem_classes="info-panels"):
+                    # Creation type info
+                    creation_info = gr.HTML(value="", elem_classes="option-info")
+                    
+                    # Art style info
+                    art_info = gr.HTML(value="", elem_classes="option-info")
+                    
+                    # Model info panel
+                    model_info = gr.HTML(value="", elem_classes="option-info")
+                
+                # Generate button with clear call to action
+                with gr.Group(elem_classes="action-group"):
+                    # Generate button with progress indicator
+                    generate_button = gr.Button(
+                        "✨ Generate Image",
+                        variant="primary",
+                        elem_classes="primary",
+                        elem_id="generate-button"
+                    )
+                    
+                    # Generation status message
+                    generation_status = gr.HTML(value="", elem_classes="generation-status")
+                
+                # Tips section in collapsible accordion
+                with gr.Accordion("📝 Tips for better results", open=True):
+                    gr.HTML("""
+                    <div class="tips-container">
+                        <h3>Tips for better results:</h3>
+                        <ul>
+                            <li><strong>Be specific and detailed</strong> - Include information about subjects, environment, lighting, colors, perspective, time of day, etc.</li>
+                            <li><strong>Use descriptive adjectives</strong> - Words like "vibrant", "moody", "ethereal", "weathered" help set the tone.</li>
+                            <li><strong>Experiment with art styles</strong> - Different styles can dramatically change the look and feel.</li>
+                            <li><strong>Combine with the right model</strong> - SDXL provides the highest quality but takes longer.</li>
+                            <li><strong>Think about composition</strong> - Mention foreground/background elements and their relationships.</li>
+                        </ul>
+                    </div>
+                    """)
+            
+            # Right column - Output display
+            with gr.Column(scale=1, min_width=480):
+                # Image display area with placeholder
+                with gr.Group(elem_classes="output-container"):
+                    # Output image with interactive elements
+                    image_output = gr.Image(
+                        label="Generated Image",
+                        elem_id="image-output",
+                        type="pil",
+                        height=512
+                    )
+                
+                # Image generation details
+                with gr.Accordion("Image Details", open=True):
+                    parameters_display = gr.HTML(value="")
+                
+                # Enhanced prompt display
+                with gr.Accordion("Enhanced Prompt", open=False):
+                    prompt_output = gr.Textbox(
+                        label="AI-Enhanced Prompt Used",
+                        lines=5,
+                        elem_id="prompt-output",
+                        elem_classes="prompt-display"
+                    )
+                
+                # Technical details for advanced users
+                with gr.Accordion("Technical Details", open=False):
+                    technical_info = gr.HTML("""
+                    <div class="technical-info">
+                        <h4>How Image Generation Works</h4>
+                        <p>Images are generated using Stable Diffusion, a latent text-to-image diffusion model. Your text prompt is:
+                        <ol>
+                            <li>Enhanced with AI to add descriptive details and quality terms</li>
+                            <li>Processed through a neural network that gradually transforms random noise into an image</li>
+                            <li>Refined based on the parameters you select (model, style, mood)</li>
+                        </ol>
+                        </p>
+                        <p>Different models have different strengths:
+                        <ul>
+                            <li><strong>SDXL 1.0</strong>: Highest quality, best composition and details</li>
+                            <li><strong>SD 1.5</strong>: Faster generation, good for general purpose</li>
+                            <li><strong>SD 2.1</strong>: Better with human faces, improved consistency</li>
+                            <li><strong>OpenJourney</strong>: Midjourney-like stylized artistic results</li>
+                            <li><strong>Dreamlike</strong>: Dreamy, ethereal aesthetic with artistic flair</li>
+                        </ul>
+                        </p>
+                    </div>
+                    """)
+
+        # Return all the UI components that need event handlers
+        return interface, description_input, creation_type, art_style, mood_dropdown, model_selector, generate_button, image_output, generation_status, prompt_output, parameters_display, char_counter, creation_info, art_info, model_info
+
+# Helper function to update character count with color coding
+def update_char_count(text):
+    count = len(text)
+    if count == 0:
+        color_class = ""
+    elif count < 20:
+        color_class = "warning"
+    elif count > 300:
+        color_class = "warning"
+    elif count > 500:
+        color_class = "error"
+    else:
+        color_class = ""
+    
+    return f"<div class='character-counter {color_class}'>{count} characters</div>"
+
+# Helper function to update creation type info
+def update_creation_info(choice):
+    key = extract_key(choice)
+    if key in CREATION_TYPES:
+        info = CREATION_TYPES[key]
+        return f"""<div class="info-card">
+            <h3>{info['icon']} {key}</h3>
+            <p>{info['description']}</p>
+            <p style="margin-top: 0.5rem; font-style: italic; opacity: 0.8;">💡 {info['prompt_hint']}</p>
+        </div>"""
+    return ""
+
+# Helper function to update art style info
+def update_art_style_info(choice):
+    key = extract_key(choice)
+    if key in ART_STYLES:
+        info = ART_STYLES[key]
+        return f"""<div class="info-card">
+            <h3>{info['icon']} {key}</h3>
+            <p>{info['description']}</p>
+            <p style="margin-top: 0.5rem; font-style: italic; opacity: 0.8;">🎨 Examples: {info['examples']}</p>
+        </div>"""
+    return ""
+
+# Helper function to update model info
+def update_model_info(formatted_choice):
+    # Extract display name without the icon
+    if ' ' in formatted_choice:
+        display_name = formatted_choice.split(' ', 1)[1]
+        # Find the corresponding key and info
+        for key, info in IMAGE_MODELS.items():
+            if info['display_name'] == display_name:
+                # Create speed badge
+                speed_badge = ""
+                if info.get('speed') == 'fast':
+                    speed_badge = '<span class="badge badge-success">Fast</span>'
+                elif info.get('speed') == 'medium':
+                    speed_badge = '<span class="badge badge-warning">Medium</span>'
+                elif info.get('speed') == 'slow':
+                    speed_badge = '<span class="badge badge-error">Slower</span>'
+                
+                # Create quality badge
+                quality_badge = ""
+                if info.get('quality') == 'excellent':
+                    quality_badge = '<span class="badge badge-success">Excellent Quality</span>'
+                elif info.get('quality') == 'very good':
+                    quality_badge = '<span class="badge badge-success">Very Good Quality</span>'
+                elif info.get('quality') == 'good':
+                    quality_badge = '<span class="badge badge-info">Good Quality</span>'
+                elif info.get('quality') == 'stylized':
+                    quality_badge = '<span class="badge badge-info">Stylized</span>'
+                elif info.get('quality') == 'artistic':
+                    quality_badge = '<span class="badge badge-info">Artistic</span>'
+                
+                return f"""<div class="model-info">
+                    <h3>{info['icon']} {info['display_name']} {speed_badge} {quality_badge}</h3>
+                    <p>{info['description']}</p>
+                    <div class="model-id">{key}</div>
+                </div>"""
+    return ""
+
+# Helper function to update status message
+def update_status(message, is_error=False, is_warning=False, is_info=False):
+    if is_error:
+        status_class = "status-error"
+        icon = "❌"
+    elif is_warning:
+        status_class = "status-warning"
+        icon = "⚠️"
+    elif is_info:
+        status_class = "status-info"
+        icon = "ℹ️"
+    else:
+        status_class = "status-success"
+        icon = "✅"
+    
+    return f"""<div class="status-message {status_class}">
+        <span class="icon">{icon}</span>
+        <span>{message}</span>
+    </div>"""
+
+# Helper function to format parameters display as pills
+def format_parameters(creation_type_val, art_style_val, mood_val, model_name):
+    creation_key = extract_key(creation_type_val)
+    art_key = extract_key(art_style_val)
+    mood_key = extract_key(mood_val)
+    
+    # Get model info
+    model_display_name = "Unknown Model"
+    model_id = ""
+    model_icon = "🤖"
+    for key, info in IMAGE_MODELS.items():
+        if f"{info['icon']} {info['display_name']}" == model_name:
+            model_display_name = info['display_name']
+            model_id = key
+            model_icon = info['icon']
+            break
+    
+    html = """<div style="margin-bottom: 1rem;">
+        <div style="font-weight: 500; margin-bottom: 0.75rem;">Generated with these parameters:</div>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">"""
+    
+    # Add creation type pill
+    if creation_key in CREATION_TYPES:
+        html += f"""<div class="parameter-pill">
+            <span class="icon">{CREATION_TYPES[creation_key]['icon']}</span> {creation_key}
+        </div>"""
+    
+    # Add art style pill
+    if art_key in ART_STYLES:
+        html += f"""<div class="parameter-pill">
+            <span class="icon">{ART_STYLES[art_key]['icon']}</span> {art_key}
+        </div>"""
+    
+    # Add mood pill
+    if mood_key in MOODS:
+        html += f"""<div class="parameter-pill">
+            <span class="icon">{MOODS[mood_key]['icon']}</span> {mood_key}
+        </div>"""
+    
+    # Add model pill
+    html += f"""<div class="parameter-pill">
+        <span class="icon">{model_icon}</span> {model_display_name}
+    </div>"""
+    
+    # Close container
+    html += """</div>
+        <div style="margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted);">
+            Image generated on {timestamp}
+        </div>
+    </div>""".replace("{timestamp}", time.strftime("%Y-%m-%d at %H:%M:%S"))
+    
+    return html