Upload app.py

app.py

@@ -207,121 +207,116 @@ def generate_images(prompt, num_steps, seed, height, width, style_preset,
     
     yield gallery_val, final_status, json.dumps(summary, indent=2)
 
-# Custom CSS for the beautiful UI
+# Custom CSS - Keep the beauty alive! 🎨
 custom_css = """
-:root {
-    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    --primary-color: #4f46e5;
-    --success-color: #10b981;
-    --error-color: #ef4444;
-    --warning-color: #f59e0b;
-}
-
 .gradio-container {
     max-width: 1200px !important;
     margin: 0 auto !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 }
 
-.header-container {
-    background: var(--primary-gradient);
-    color: white;
-    padding: 40px 30px;
-    border-radius: 16px;
-    margin-bottom: 30px;
-    text-align: center;
-    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
+/* Beautiful Gradient Header */
+.header-gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    padding: 40px 30px !important;
+    border-radius: 16px !important;
+    margin-bottom: 30px !important;
+    text-align: center !important;
+    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3) !important;
 }
 
 .header-title {
-    font-size: 2.8em;
-    font-weight: 700;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 15px;
+    font-size: 2.8em !important;
+    font-weight: 700 !important;
+    margin-bottom: 10px !important;
 }
 
 .header-subtitle {
-    font-size: 1.2em;
-    opacity: 0.9;
-    max-width: 600px;
-    margin: 0 auto;
+    font-size: 1.2em !important;
+    opacity: 0.9 !important;
+    max-width: 600px !important;
+    margin: 0 auto !important;
 }
 
+/* API Status */
 .api-status {
-    padding: 16px 20px;
-    border-radius: 12px;
-    margin-bottom: 25px;
-    font-weight: 600;
-    font-size: 1.1em;
-    border-left: 6px solid;
+    padding: 16px 20px !important;
+    border-radius: 12px !important;
+    margin-bottom: 25px !important;
+    font-weight: 600 !important;
+    font-size: 1.1em !important;
+    border-left: 6px solid !important;
 }
 
 .api-status-success {
-    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-    color: #065f46;
-    border-left-color: var(--success-color);
+    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
+    color: #065f46 !important;
+    border-left-color: #10b981 !important;
 }
 
 .api-status-error {
-    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-    color: #7f1d1d;
-    border-left-color: var(--error-color);
+    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
+    color: #7f1d1d !important;
+    border-left-color: #ef4444 !important;
 }
 
+/* Input Sections */
 .input-section {
-    background: white;
-    padding: 30px;
-    border-radius: 16px;
-    border: 1px solid #e5e7eb;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
-    margin-bottom: 25px;
+    background: white !important;
+    padding: 30px !important;
+    border-radius: 16px !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
+    margin-bottom: 25px !important;
 }
 
 .section-title {
-    color: #333;
-    font-size: 1.4em;
-    font-weight: 600;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    color: #333 !important;
+    font-size: 1.4em !important;
+    font-weight: 600 !important;
+    margin-bottom: 20px !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
 }
 
+/* Example Cards */
 .example-card {
-    background: #f8fafc;
-    padding: 20px;
-    border-radius: 12px;
-    border: 2px solid #e2e8f0;
-    margin: 12px 0;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: #f8fafc !important;
+    padding: 20px !important;
+    border-radius: 12px !important;
+    border: 2px solid #e2e8f0 !important;
+    margin: 12px 0 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    text-align: left !important;
+    width: 100% !important;
 }
 
 .example-card:hover {
-    background: #e2e8f0;
-    transform: translateY(-4px);
-    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-    border-color: var(--primary-color);
+    background: #e2e8f0 !important;
+    transform: translateY(-4px) !important;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
+    border-color: #4f46e5 !important;
 }
 
 .example-title {
-    color: var(--primary-color);
-    font-weight: 600;
-    font-size: 1.1em;
-    margin-bottom: 8px;
+    color: #4f46e5 !important;
+    font-weight: 600 !important;
+    font-size: 1.1em !important;
+    margin-bottom: 8px !important;
 }
 
 .example-desc {
-    color: #666;
-    font-size: 0.95em;
-    line-height: 1.4;
+    color: #666 !important;
+    font-size: 0.95em !important;
+    line-height: 1.4 !important;
 }
 
+/* Beautiful Generate Button */
 .generate-btn {
-    background: var(--primary-gradient) !important;
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
     color: white !important;
     font-weight: 700 !important;
     padding: 18px 40px !important;
@@ -329,12 +324,12 @@ custom_css = """
     border-radius: 12px !important;
     border: none !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4) !important;
 }
 
 .generate-btn:hover {
     transform: translateY(-3px) !important;
-    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5) !important;
+    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.5) !important;
 }
 
 .secondary-btn {
@@ -343,52 +338,58 @@ custom_css = """
     border: 2px solid #e2e8f0 !important;
 }
 
-.param-group {
-    background: #f9fafb;
-    padding: 20px;
-    border-radius: 12px;
-    margin-bottom: 20px;
-    border: 1px solid #e5e7eb;
-}
-
+/* Gallery */
 .gallery-container {
-    background: white;
-    padding: 25px;
-    border-radius: 16px;
-    border: 1px solid #e5e7eb;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+    background: white !important;
+    padding: 25px !important;
+    border-radius: 16px !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
 }
 
+/* Status Box */
 .status-box {
-    background: #f8fafc;
-    padding: 20px;
-    border-radius: 12px;
-    border-left: 5px solid var(--primary-color);
-    margin-bottom: 20px;
-    font-size: 1.1em;
+    background: #f8fafc !important;
+    padding: 20px !important;
+    border-radius: 12px !important;
+    border-left: 5px solid #4f46e5 !important;
+    margin-bottom: 20px !important;
+    font-size: 1.1em !important;
 }
 
+/* Footer */
 .footer {
-    text-align: center;
-    color: #666;
-    font-size: 0.9em;
-    margin-top: 40px;
-    padding-top: 20px;
-    border-top: 1px solid #e5e7eb;
+    text-align: center !important;
+    color: #666 !important;
+    font-size: 0.9em !important;
+    margin-top: 40px !important;
+    padding-top: 20px !important;
+    border-top: 1px solid #e5e7eb !important;
 }
 
-.tab-button {
-    font-weight: 600 !important;
-    padding: 12px 24px !important;
+/* Make sure dark mode doesn't break our beauty */
+.dark .input-section,
+.dark .gallery-container {
+    background: #1f2937 !important;
+    border-color: #374151 !important;
+}
+
+.dark .example-card {
+    background: #374151 !important;
+    border-color: #4b5563 !important;
+}
+
+.dark .status-box {
+    background: #374151 !important;
 }
 """
 
-# Create the Gradio interface - FIXED: removed css from Blocks constructor
-with gr.Blocks(title="Pixazo Image Generator") as demo:
+# Create the interface
+with gr.Blocks(title="Pixazo Image Generator", theme=gr.themes.Soft()) as demo:
     
-    # Custom header
+    # Beautiful Header
     gr.HTML("""
-    <div class="header-container">
+    <div class="header-gradient">
         <div class="header-title">
             🎨 Pixazo Image Generator
         </div>
@@ -414,99 +415,82 @@ with gr.Blocks(title="Pixazo Image Generator") as demo:
         </div>
         """)
     
-    with gr.Row(equal_height=False):
+    with gr.Row():
         # Left Column - Inputs
-        with gr.Column(scale=1, min_width=450):
+        with gr.Column(scale=1):
             # Prompt Section
             with gr.Group(elem_classes="input-section"):
-                gr.Markdown("""
-                <div class="section-title">
-                    ✨ Image Description
-                </div>
-                """)
+                gr.Markdown("### ✨ Image Description")
                 prompt = gr.Textbox(
                     label="",
-                    placeholder="Describe the image you want to generate in detail...",
+                    placeholder="Describe the image you want to generate...",
                     lines=4,
-                    show_label=False,
-                    container=False
+                    show_label=False
                 )
             
             # Parameters Section
             with gr.Group(elem_classes="input-section"):
-                gr.Markdown("""
-                <div class="section-title">
-                    ⚙️ Generation Parameters
-                </div>
-                """)
+                gr.Markdown("### ⚙️ Generation Parameters")
                 
                 with gr.Row():
                     style_preset = gr.Dropdown(
-                        label="🎭 Style Preset",
+                        label="Style Preset",
                         choices=[
                             "none", "cyberpunk", "fantasy", "anime", "photographic", 
                             "digital-art", "comic", "3d-model", "pixel-art", 
-                            "isometric", "watercolor", "oil-painting", "sketch",
-                            "cinematic", "sci-fi", "renaissance", "impressionist"
+                            "isometric", "watercolor", "oil-painting", "sketch"
                         ],
-                        value="none",
-                        info="Select an art style"
+                        value="none"
                     )
                 
                 with gr.Row():
                     guidance_scale = gr.Slider(
-                        label="🎯 Guidance Scale",
+                        label="Guidance Scale",
                         minimum=1.0,
                         maximum=20.0,
                         value=7.5,
-                        step=0.5,
-                        info="Higher values = more prompt adherence"
+                        step=0.5
                     )
                 
                 with gr.Row():
                     num_steps = gr.Slider(
-                        label="⚡ Inference Steps",
+                        label="Steps",
                         minimum=1,
-                        maximum=100,
+                        maximum=50,
                         value=4,
-                        step=1,
-                        info="More steps = better quality but slower"
+                        step=1
                     )
                     
                     seed = gr.Number(
-                        label="🌱 Seed",
+                        label="Seed",
                         value=42,
                         minimum=0,
-                        maximum=999999,
-                        info="0 for random, fixed for reproducible results"
+                        maximum=999999
                     )
                 
                 with gr.Row():
                     width = gr.Slider(
-                        label="📏 Width",
+                        label="Width",
                         minimum=256,
-                        maximum=2048,
+                        maximum=1024,
                         value=512,
-                        step=64,
-                        info="Image width in pixels"
+                        step=64
                     )
                     
                     height = gr.Slider(
-                        label="📐 Height",
+                        label="Height",
                         minimum=256,
-                        maximum=2048,
+                        maximum=1024,
                         value=512,
-                        step=64,
-                        info="Image height in pixels"
+                        step=64
                     )
                 
                 num_images = gr.Slider(
-                    label="🖼️ Number of Images",
+                    label="Number of Images",
                     minimum=1,
                     maximum=8,
                     value=1,
-                    step=1,
-                    info="Generate multiple variations"
+                    step=1
                 )
             
             # Action Buttons
@@ -514,65 +498,47 @@ with gr.Blocks(title="Pixazo Image Generator") as demo:
                 generate_btn = gr.Button(
                     "✨ Generate Images", 
                     variant="primary",
-                    scale=3,
-                    elem_classes="generate-btn"
-                )
-                clear_btn = gr.Button(
-                    "🗑️ Clear", 
-                    variant="secondary",
-                    scale=1,
-                    elem_classes="secondary-btn"
+                    elem_classes="generate-btn",
+                    scale=2
                 )
+                clear_btn = gr.Button("🗑️ Clear", variant="secondary", scale=1)
             
             # Examples Section
             with gr.Group(elem_classes="input-section"):
-                gr.Markdown("""
-                <div class="section-title">
-                    💡 Example Prompts
-                </div>
-                <p style="color: #666; margin-bottom: 15px;">Click any example to try it:</p>
-                """)
+                gr.Markdown("### 💡 Example Prompts")
                 
                 examples = [
-                    ("Cyberpunk Cityscape", "A futuristic cyberpunk city at night with neon signs, flying cars, and rain reflections", "cyberpunk"),
-                    ("Fantasy Dragon", "A majestic dragon perched on a mountain peak overlooking a magical kingdom at sunset", "fantasy"),
-                    ("Anime Character", "A cute anime girl with magical powers in a cherry blossom garden, studio ghibli style", "anime"),
-                    ("Space Explorer", "An astronaut on Mars with detailed reflection in visor, photorealistic", "photographic"),
-                    ("Isometric Office", "Cozy isometric bedroom with plants, books, and warm lighting, detailed 3d render", "isometric")
+                    ("Cyberpunk City", "A futuristic cyberpunk city at night with neon signs and flying cars", "cyberpunk"),
+                    ("Fantasy Dragon", "A majestic dragon on a mountain peak overlooking a magical kingdom", "fantasy"),
+                    ("Anime Character", "A cute anime girl with magical powers in a cherry blossom garden", "anime"),
+                    ("Space Explorer", "An astronaut on Mars with detailed reflection in visor", "photographic"),
+                    ("Isometric Scene", "Cozy isometric bedroom with plants and warm lighting", "isometric")
                 ]
                 
                 for title, desc, style in examples:
-                    # Create a clickable example card using a Button with custom styling
-                    example_btn = gr.Button(
-                        value=f"{title}: {desc[:50]}...",
-                        size="sm",
+                    # Create example buttons
+                    btn = gr.Button(
+                        f"📌 {title}",
                         variant="secondary",
+                        size="sm",
                         elem_classes="example-card"
                     )
                     
                     def use_example(p=desc, s=style):
                         return p, s
                     
-                    example_btn.click(
+                    btn.click(
                         use_example,
                         outputs=[prompt, style_preset]
                     )
         
         # Right Column - Outputs
-        with gr.Column(scale=2, min_width=650):
+        with gr.Column(scale=2):
             # Status Display
-            gr.HTML("""
-            <div class="section-title">
-                📊 Generation Results
-            </div>
-            """)
-            
             status = gr.Textbox(
-                label="",
-                value="🎯 Ready to generate images. Enter a prompt above and click Generate!",
+                label="Status",
+                value="🎯 Ready to generate images. Enter a prompt above!",
                 interactive=False,
-                lines=2,
-                container=False,
                 elem_classes="status-box"
             )
             
@@ -582,55 +548,37 @@ with gr.Blocks(title="Pixazo Image Generator") as demo:
                     label="🎨 Generated Images",
                     columns=3,
                     height="auto",
-                    object_fit="contain",
-                    show_label=True,
-                    preview=True
+                    show_label=True
                 )
             
-            # Tabs for additional info
+            # Info Tabs
             with gr.Tabs():
-                with gr.TabItem("📈 Generation Details"):
+                with gr.TabItem("📊 Response Details"):
                     json_output = gr.JSON(
-                        label="API Response & Metrics",
+                        label="API Response",
                         container=True
                     )
                 
-                with gr.TabItem("🛠️ Quick Actions"):
-                    with gr.Column():
-                        gr.Markdown("""
-                        ### Quick Actions
-                        
-                        **Download Options:**
-                        - Right-click any image to save it
-                        - Use browser's "Save image as" option
-                        
-                        **Tips for Better Results:**
-                        1. **Be descriptive** - Include details about lighting, style, mood
-                        2. **Use specific styles** - Try different style presets
-                        3. **Adjust guidance** - Higher values follow prompt more closely
-                        4. **Experiment with seeds** - Same seed + same prompt = same image
-                        """)
-                
                 with gr.TabItem("ℹ️ About"):
                     gr.Markdown(f"""
-                    ### About This Application
+                    ### About This App
                     
                     **Version:** 1.0.0
                     **Gradio:** {gr.__version__}
                     **API Format:** `{"output": "IMAGE_URL"}`
                     
-                    **How It Works:**
-                    1. Your prompt is sent to Pixazo's FLUX-1 Schnell API
-                    2. API returns a JSON response with an image URL
-                    3. App downloads and displays the image
-                    4. All metadata is shown for transparency
+                    **Features:**
+                    - 🖼️ Generate multiple images at once
+                    - 🎭 Various style presets
+                    - ⚡ Adjustable quality settings
+                    - 🔒 Secure API key handling
+                    - 📱 Responsive design
+                    - 🔄 Real-time progress updates
                     
                     **Credits:**
-                    - Powered by [Pixazo AI](https://pixazo.ai)
-                    - Built with [Gradio](https://gradio.app)
-                    - Hosted on [Hugging Face Spaces](https://huggingface.co/spaces)
-                    
-                    **Note:** API key must be set in Space secrets for this to work.
+                    - Powered by Pixazo AI
+                    - Built with Gradio
+                    - Hosted on Hugging Face Spaces
                     """)
     
     # Footer
@@ -647,14 +595,13 @@ with gr.Blocks(title="Pixazo Image Generator") as demo:
             yield None, "❌ Please enter a prompt first", {"error": "No prompt provided"}
             return
         
-        # Generator function that yields progress
         for gallery_val, status_val, json_val in generate_images(
             prompt, num_steps, seed, height, width, style_preset, num_images, guidance_scale
         ):
             yield gallery_val, status_val, json_val
     
     def on_clear():
-        return None, "🎯 Ready to generate images. Enter a prompt above and click Generate!", None
+        return None, "🎯 Ready to generate images. Enter a prompt above!", None
     
     # Connect buttons
     generate_btn.click(
@@ -668,16 +615,15 @@ with gr.Blocks(title="Pixazo Image Generator") as demo:
         outputs=[gallery, status, json_output]
     )
 
-# Launch the app
+# Launch with beauty preserved! 🎨
 if __name__ == "__main__":
     print("=" * 60)
-    print("🚀 Pixazo Image Generator")
-    print("🎨 Beautiful UI with Gradio 6.2.0 - FIXED VERSION")
+    print("🚀 Launching Pixazo Image Generator")
+    print("🎨 Beautiful UI Version")
     print(f"📦 Gradio Version: {gr.__version__}")
-    print(f"🔑 API Key Configured: {'Yes' if get_api_key() else 'No'}")
+    print(f"🔑 API Key: {'✅ Configured' if get_api_key() else '❌ Not Configured'}")
     print("=" * 60)
     
-    # Launch with css parameter in launch() method for Gradio 6.x
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,