Delete ui_components.py

ui_components.py

@@ -1,1135 +0,0 @@
-# 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