Update app.py

app.py

@@ -159,99 +159,368 @@ examples = [
     "Ghibli style robot farmer tending to floating rice paddies in the sky, wearing a traditional straw hat with advanced sensors. Its gentle movements create ripples in the water as it plants glowing rice seedlings. Flying fish leap between the terraced fields, leaving trails of sparkles in their wake, while future Tokyo's spires gleam in the distance. [trigger]"
 ]
 
+# Enhanced CSS for a more visually refined UI
 css = """
+:root {
+    --primary-color: #6a92cc;
+    --primary-hover: #557ab8;
+    --secondary-color: #f4c062;
+    --background-color: #f7f9fc;
+    --panel-background: #ffffff;
+    --text-color: #333333;
+    --border-radius: 12px;
+    --shadow: 0 4px 12px rgba(0,0,0,0.08);
+    --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+body {
+    background-color: var(--background-color);
+    font-family: var(--font-main);
+}
+
+.gradio-container {
+    margin: 0 auto;
+    max-width: 1200px !important;
+}
+
+.main-header {
+    text-align: center;
+    padding: 2rem 1rem 1rem;
+    background: linear-gradient(90deg, #6a92cc 0%, #8f7fc8 100%);
+    color: white;
+    margin-bottom: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+}
+
+.main-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.main-header p {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    opacity: 0.9;
+}
+
+.main-header a {
+    color: var(--secondary-color);
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.main-header a:hover {
+    text-decoration: underline;
+    opacity: 0.9;
+}
+
+.container {
+    background-color: var(--panel-background);
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    margin-bottom: 1.5rem;
+}
+
+button.primary {
+    background: var(--primary-color) !important;
+    border: none !important;
+    color: white !important;
+    padding: 10px 20px !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
+    transition: all 0.2s ease !important;
+}
+
+button.primary:hover {
+    background: var(--primary-hover) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
+}
+
+button.secondary {
+    background: white !important;
+    border: 1px solid #ddd !important;
+    color: var(--text-color) !important;
+    padding: 10px 20px !important;
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
+    transition: all 0.2s ease !important;
+}
+
+button.secondary:hover {
+    background: #f5f5f5 !important;
+    transform: translateY(-2px) !important;
+}
+
+.gr-box {
+    border-radius: var(--border-radius) !important;
+    border: 1px solid #e0e0e0 !important;
+}
+
+.gr-panel {
+    border-radius: var(--border-radius) !important;
+}
+
+.gr-input {
+    border-radius: 8px !important;
+    border: 1px solid #ddd !important;
+    padding: 12px !important;
+}
+
+.gr-form {
+    border-radius: var(--border-radius) !important;
+    background-color: var(--panel-background) !important;
+}
+
+.gr-accordion {
+    border-radius: var(--border-radius) !important;
+    overflow: hidden !important;
+}
+
+.gr-button {
+    border-radius: 8px !important;
+}
+
+.gallery-item {
+    border-radius: var(--border-radius) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gallery-item:hover {
+    transform: scale(1.02) !important;
+    box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important;
+}
+
+.tabs {
+    border-radius: var(--border-radius) !important;
+    overflow: hidden !important;
+}
+
 footer {
-    visibility: hidden;
+    display: none !important;
 }
-"""
 
-# Use a simpler UI configuration that is less likely to cause issues
-with gr.Blocks(css=css, analytics_enabled=False) as demo:
-    gr.HTML('<div class="title"> FLUX Ghibli LoRA</div>')
-    gr.HTML('<div class="title">😄Image to Video Explore: <a href="https://huggingface.co/spaces/ginigen/theater" target="_blank">https://huggingface.co/spaces/ginigen/theater</a></div>')
+.settings-accordion legend span {
+    font-weight: 600 !important;
+}
 
-    with gr.Row():
-        with gr.Column(scale=3):
-            prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt")
-            
-            with gr.Row():
-                run_button = gr.Button("Generate Image")
-                clear_button = gr.Button("Clear")
-            
-            with gr.Accordion("Settings", open=False):
-                seed = gr.Slider(
-                    label="Seed",
-                    minimum=0,
-                    maximum=MAX_SEED,
-                    step=1,
-                    value=42,
-                )
-                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+.example-prompt {
+    font-size: 0.9rem;
+    color: #555;
+    padding: 8px;
+    background: #f5f7fa;
+    border-radius: 6px;
+    border-left: 3px solid var(--primary-color);
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
 
-                with gr.Row():
-                    width = gr.Slider(
-                        label="Width",
-                        minimum=256,
-                        maximum=MAX_IMAGE_SIZE,
-                        step=32,
-                        value=1024,
-                    )
-                    height = gr.Slider(
-                        label="Height",
-                        minimum=256,
-                        maximum=MAX_IMAGE_SIZE,
-                        step=32,
-                        value=768,
-                    )
+.example-prompt:hover {
+    background: #eef2f8;
+}
 
-                with gr.Row():
-                    guidance_scale = gr.Slider(
-                        label="Guidance scale",
-                        minimum=0.0,
-                        maximum=10.0,
-                        step=0.1,
-                        value=3.5,
-                    )
-                    num_inference_steps = gr.Slider(
-                        label="Steps",
-                        minimum=1,
-                        maximum=50,
-                        step=1,
-                        value=30,
-                    )
-                    lora_scale = gr.Slider(
-                        label="LoRA scale",
-                        minimum=0.0,
-                        maximum=1.0,
-                        step=0.1,
-                        value=1.0,
+/* Status indicators */
+.status-generating {
+    color: #ffa200;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status-generating::before {
+    content: "";
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #ffa200;
+    animation: pulse 1.5s infinite;
+}
+
+.status-complete {
+    color: #00c853;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status-complete::before {
+    content: "";
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #00c853;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.6;
+    }
+}
+
+/* Custom accordions and tabs styling */
+.gr-accordion-title {
+    font-weight: 600 !important;
+    color: var(--text-color) !important;
+}
+
+.tabs button {
+    font-weight: 500 !important;
+    padding: 10px 16px !important;
+}
+
+.tabs button.selected {
+    font-weight: 600 !important;
+    color: var(--primary-color) !important;
+    background: rgba(106, 146, 204, 0.1) !important;
+}
+
+/* Improve slider appearance */
+.gr-slider-container {
+    padding: 10px 0 !important;
+}
+
+/* Enhanced Markdown content */
+.gr-prose h3 {
+    font-weight: 600 !important;
+    color: var(--primary-color) !important;
+    margin-bottom: 1rem !important;
+}
+"""
+
+# Use a cleaner, more visual UI configuration
+with gr.Blocks(css=css, analytics_enabled=False, theme="soft") as demo:
+    with gr.Column():
+        # Custom header with improved styling
+        gr.HTML('''
+        <div class="main-header">
+            <h1>✨ FLUX Ghibli LoRA Generator ✨</h1>
+            <p>Community: <a href="https://discord.gg/openfreeai" target="_blank">https://discord.gg/openfreeai</a></p>
+        </div>
+        ''')
+        
+        with gr.Row():
+            with gr.Column(scale=3):
+                with gr.Box(elem_classes="container"):
+                    prompt = gr.Textbox(
+                        label="Enter your imagination",
+                        placeholder="Describe your Ghibli-style image here...",
+                        lines=3
                     )
+                    
+                    with gr.Row():
+                        run_button = gr.Button("✨ Generate Image", elem_classes="primary")
+                        clear_button = gr.Button("Clear", elem_classes="secondary")
+                    
+                    with gr.Accordion("Advanced Settings", open=False, elem_classes="settings-accordion"):
+                        with gr.Row():
+                            seed = gr.Slider(
+                                label="Seed",
+                                minimum=0,
+                                maximum=MAX_SEED,
+                                step=1,
+                                value=42,
+                            )
+                            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+
+                        with gr.Row():
+                            width = gr.Slider(
+                                label="Width",
+                                minimum=256,
+                                maximum=MAX_IMAGE_SIZE,
+                                step=32,
+                                value=1024,
+                            )
+                            height = gr.Slider(
+                                label="Height",
+                                minimum=256,
+                                maximum=MAX_IMAGE_SIZE,
+                                step=32,
+                                value=768,
+                            )
+
+                        with gr.Row():
+                            guidance_scale = gr.Slider(
+                                label="Guidance scale",
+                                minimum=0.0,
+                                maximum=10.0,
+                                step=0.1,
+                                value=3.5,
+                            )
+                            
+                        with gr.Row():
+                            num_inference_steps = gr.Slider(
+                                label="Steps",
+                                minimum=1,
+                                maximum=50,
+                                step=1,
+                                value=30,
+                            )
+                            lora_scale = gr.Slider(
+                                label="LoRA scale",
+                                minimum=0.0,
+                                maximum=1.0,
+                                step=0.1,
+                                value=1.0,
+                            )
+                
+                with gr.Box(elem_classes="container"):
+                    gr.Markdown("### ✨ Example Prompts")
+                    example_container = gr.HTML(examples=[
+                        f'<div class="example-prompt">{example}</div>' for example in examples
+                    ])
             
-            gr.Examples(
-                examples=examples,
-                inputs=prompt,
-            )
-        
-        with gr.Column(scale=4):
-            result = gr.Image(label="Generated Image")
-            seed_text = gr.Number(label="Used Seed", value=42)
+            with gr.Column(scale=4):
+                with gr.Box(elem_classes="container"):
+                    # Image result container with status indicator
+                    with gr.Group():
+                        generation_status = gr.HTML('<div class="status-complete">Ready to generate</div>')
+                        result = gr.Image(label="Generated Image", elem_id="result-image")
+                        seed_text = gr.Number(label="Used Seed", value=42)
     
-    with gr.Tab("Gallery"):
-        gallery_header = gr.Markdown("### Generated Images Gallery")
-        generated_gallery = gr.Gallery(
-            label="Generated Images",
-            columns=3,
-            value=load_generated_images(),
-            height="auto"
-        )
-        refresh_btn = gr.Button("🔄 Refresh Gallery")
+    with gr.Tabs(elem_classes="tabs") as tabs:
+        with gr.TabItem("Gallery"):
+            with gr.Box(elem_classes="container"):
+                gallery_header = gr.Markdown("### 🖼️ Your Generated Masterpieces")
+                with gr.Row():
+                    refresh_btn = gr.Button("🔄 Refresh Gallery", elem_classes="secondary")
+                generated_gallery = gr.Gallery(
+                    label="Generated Images",
+                    columns=3,
+                    value=load_generated_images(),
+                    height="500px",
+                    elem_classes="gallery-item"
+                )
 
     # Event handlers
     def refresh_gallery():
         return load_generated_images()
 
     def clear_output():
-        return "", gr.update(value=None), seed
+        return "", gr.update(value=None), seed, '<div class="status-complete">Ready to generate</div>'
+    
+    def before_generate():
+        return '<div class="status-generating">Generating image...</div>'
+    
+    def after_generate(image, seed, gallery):
+        return image, seed, gallery, '<div class="status-complete">Generation complete!</div>'
 
     refresh_btn.click(
         fn=refresh_gallery,
@@ -262,10 +531,15 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
     clear_button.click(
         fn=clear_output,
         inputs=None,
-        outputs=[prompt, result, seed_text]
+        outputs=[prompt, result, seed_text, generation_status]
     )
-
+    
+    # Update with status indicators for generation process
     run_button.click(
+        fn=before_generate,
+        inputs=None,
+        outputs=generation_status,
+    ).then(
         fn=inference,
         inputs=[
             prompt,
@@ -278,9 +552,17 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
             lora_scale,
         ],
         outputs=[result, seed_text, generated_gallery],
+    ).then(
+        fn=after_generate,
+        inputs=[result, seed_text, generated_gallery],
+        outputs=[result, seed_text, generated_gallery, generation_status],
     )
     
     prompt.submit(
+        fn=before_generate,
+        inputs=None,
+        outputs=generation_status,
+    ).then(
         fn=inference,
         inputs=[
             prompt,
@@ -293,11 +575,37 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
             lora_scale,
         ],
         outputs=[result, seed_text, generated_gallery],
+    ).then(
+        fn=after_generate,
+        inputs=[result, seed_text, generated_gallery],
+        outputs=[result, seed_text, generated_gallery, generation_status],
     )
+    
+    # Custom JavaScript for handling example prompts
+    gr.HTML("""
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Add click handlers to example prompts
+        setTimeout(() => {
+            const examples = document.querySelectorAll('.example-prompt');
+            const promptInput = document.querySelector('textarea');
+            
+            examples.forEach(example => {
+                example.addEventListener('click', function() {
+                    promptInput.value = this.textContent.trim();
+                    // Trigger input event to update Gradio's state
+                    const event = new Event('input', { bubbles: true });
+                    promptInput.dispatchEvent(event);
+                });
+            });
+        }, 1000); // Small delay to ensure elements are loaded
+    });
+    </script>
+    """)
 
 # Launch with fallback options
 try:
-    demo.queue(concurrency_count=1, max_size=10)
+    demo.queue(concurrency_count=1, max_size=20)
     demo.launch(debug=True, show_api=False)
 except Exception as e:
     print(f"Error during launch: {e}")