Upload app.py

app.py

@@ -1,17 +1,28 @@
 import gradio as gr
 import requests
+import json
 import os
+import time
 from PIL import Image
 import io
 from datetime import datetime
 
+# Get API key from Hugging Face secrets
 def get_api_key():
     return os.environ.get("PIXAZO_API_KEY")
 
-def generate_image(prompt):
+# Call Pixazo API
+def call_pixazo_api(prompt, num_steps=4, seed=None, height=512, width=512, 
+                   style_preset=None, guidance_scale=None):
+    
     api_key = get_api_key()
+    
     if not api_key:
-        return None, "❌ API key not set"
+        return None, {
+            "error": "API key not configured",
+            "instructions": "Please set PIXAZO_API_KEY in Hugging Face Space secrets",
+            "timestamp": datetime.now().isoformat()
+        }
     
     url = "https://gateway.pixazo.ai/flux-1-schnell/v1/getData"
     
@@ -21,15 +32,32 @@ def generate_image(prompt):
         'Ocp-Apim-Subscription-Key': api_key,
     }
     
+    # Prepare request body
     body = {
         "prompt": prompt,
-        "num_steps": 4,
-        "height": 512,
-        "width": 512,
+        "num_steps": num_steps,
+        "height": height,
+        "width": width,
     }
     
+    if seed and seed > 0:
+        body["seed"] = seed
+    if style_preset and style_preset != "none":
+        body["style_preset"] = style_preset
+    if guidance_scale:
+        body["guidance_scale"] = guidance_scale
+    
     try:
-        response = requests.post(url, headers=headers, json=body, timeout=60)
+        print(f"🌐 Sending request to Pixazo API...")
+        
+        response = requests.post(
+            url, 
+            headers=headers, 
+            json=body,
+            timeout=120
+        )
+        
+        print(f"✅ Response status: {response.status_code}")
         
         if response.status_code == 200:
             result = response.json()
@@ -37,42 +65,622 @@ def generate_image(prompt):
             if "output" in result:
                 image_url = result["output"]
                 
-                img_response = requests.get(image_url, timeout=30)
-                if img_response.status_code == 200:
-                    image = Image.open(io.BytesIO(img_response.content))
-                    if image.mode in ('RGBA', 'LA', 'P'):
-                        image = image.convert('RGB')
-                    return image, "✅ Image generated successfully!"
-                else:
-                    return None, f"❌ Failed to download image: HTTP {img_response.status_code}"
+                # Download the image from the URL
+                try:
+                    print(f"⬇️ Downloading image from URL...")
+                    img_response = requests.get(image_url, timeout=30, headers={
+                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
+                    })
+                    
+                    if img_response.status_code == 200:
+                        image = Image.open(io.BytesIO(img_response.content))
+                        
+                        # Convert to RGB if necessary
+                        if image.mode in ('RGBA', 'LA', 'P'):
+                            image = image.convert('RGB')
+                        
+                        return image, {
+                            "success": True,
+                            "status_code": 200,
+                            "image_url_preview": image_url[:80] + "..." if len(image_url) > 80 else image_url,
+                            "image_size": f"{image.size[0]}x{image.size[1]}",
+                            "timestamp": datetime.now().isoformat()
+                        }
+                    else:
+                        return None, {
+                            "error": f"Failed to download image: HTTP {img_response.status_code}",
+                            "image_url": image_url[:80] + "..." if len(image_url) > 80 else image_url,
+                            "download_status": img_response.status_code,
+                            "timestamp": datetime.now().isoformat()
+                        }
+                        
+                except Exception as e:
+                    return None, {
+                        "error": f"Error downloading image: {str(e)}",
+                        "image_url": image_url[:80] + "..." if len(image_url) > 80 else image_url,
+                        "timestamp": datetime.now().isoformat()
+                    }
             else:
-                return None, "❌ No image URL in response"
+                return None, {
+                    "error": "Response missing 'output' field",
+                    "response_keys": list(result.keys()),
+                    "timestamp": datetime.now().isoformat()
+                }
         else:
-            return None, f"❌ API error: {response.status_code}"
+            try:
+                error_data = response.json()
+                error_msg = error_data.get("error", str(error_data))
+            except:
+                error_msg = response.text[:200] if response.text else "No error message"
             
+            return None, {
+                "error": f"API returned status {response.status_code}: {error_msg}",
+                "status_code": response.status_code,
+                "timestamp": datetime.now().isoformat()
+            }
+            
+    except requests.exceptions.Timeout:
+        return None, {
+            "error": "Request timed out after 120 seconds",
+            "suggestion": "Try reducing image size or number of steps",
+            "timestamp": datetime.now().isoformat()
+        }
+    except requests.exceptions.RequestException as e:
+        return None, {
+            "error": f"Network error: {str(e)}",
+            "timestamp": datetime.now().isoformat()
+        }
     except Exception as e:
-        return None, f"❌ Error: {str(e)}"
+        return None, {
+            "error": f"Unexpected error: {str(e)}",
+            "timestamp": datetime.now().isoformat()
+        }
+
+# Batch generate images
+def generate_images(prompt, num_steps, seed, height, width, style_preset, 
+                   num_images, guidance_scale):
+    
+    images = []
+    all_results = []
+    
+    for i in range(num_images):
+        try:
+            current_seed = seed + i if seed > 0 else 0
+            
+            image, result = call_pixazo_api(
+                prompt=prompt,
+                num_steps=num_steps,
+                seed=current_seed,
+                height=height,
+                width=width,
+                style_preset=style_preset,
+                guidance_scale=guidance_scale
+            )
+            
+            if image:
+                images.append(image)
+            
+            all_results.append(result)
+            
+            status_text = f"Generated {i+1}/{num_images} images"
+            if "error" in result:
+                status_text = f"Image {i+1} error: {result['error'][:50]}..."
+            
+            yield images if images else None, status_text, json.dumps(result, indent=2)
+            
+            if i < num_images - 1:
+                time.sleep(1)
+                
+        except Exception as e:
+            error_result = {"error": str(e), "image_index": i, "timestamp": datetime.now().isoformat()}
+            all_results.append(error_result)
+            yield images if images else None, f"Exception on image {i+1}: {str(e)[:50]}", json.dumps(error_result, indent=2)
+            break
+    
+    # Final summary
+    success_count = len(images)
+    
+    if success_count == 0:
+        final_status = f"❌ No images generated ({success_count}/{num_images} successful)"
+        gallery_val = None
+    elif success_count < num_images:
+        final_status = f"⚠️ Partial success: {success_count}/{num_images} images"
+        gallery_val = images
+    else:
+        final_status = f"🎉 Success! All {success_count} images generated"
+        gallery_val = images
+    
+    summary = {
+        "summary": {
+            "total_attempts": num_images,
+            "successful": success_count,
+            "failed": num_images - success_count,
+            "timestamp": datetime.now().isoformat()
+        },
+        "parameters_used": {
+            "prompt_length": len(prompt),
+            "steps": num_steps,
+            "resolution": f"{width}x{height}",
+            "style": style_preset
+        }
+    }
+    
+    yield gallery_val, final_status, json.dumps(summary, indent=2)
+
+# Custom CSS for the beautiful UI
+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);
+}
+
+.header-title {
+    font-size: 2.8em;
+    font-weight: 700;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+
+.header-subtitle {
+    font-size: 1.2em;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.api-status {
+    padding: 16px 20px;
+    border-radius: 12px;
+    margin-bottom: 25px;
+    font-weight: 600;
+    font-size: 1.1em;
+    border-left: 6px solid;
+}
+
+.api-status-success {
+    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+    color: #065f46;
+    border-left-color: var(--success-color);
+}
+
+.api-status-error {
+    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+    color: #7f1d1d;
+    border-left-color: var(--error-color);
+}
+
+.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;
+}
+
+.section-title {
+    color: #333;
+    font-size: 1.4em;
+    font-weight: 600;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.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);
+}
 
-# Simple interface
+.example-card:hover {
+    background: #e2e8f0;
+    transform: translateY(-4px);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    border-color: var(--primary-color);
+}
+
+.example-title {
+    color: var(--primary-color);
+    font-weight: 600;
+    font-size: 1.1em;
+    margin-bottom: 8px;
+}
+
+.example-desc {
+    color: #666;
+    font-size: 0.95em;
+    line-height: 1.4;
+}
+
+.generate-btn {
+    background: var(--primary-gradient) !important;
+    color: white !important;
+    font-weight: 700 !important;
+    padding: 18px 40px !important;
+    font-size: 1.2em !important;
+    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;
+}
+
+.generate-btn:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5) !important;
+}
+
+.secondary-btn {
+    background: #f1f5f9 !important;
+    color: #475569 !important;
+    border: 2px solid #e2e8f0 !important;
+}
+
+.param-group {
+    background: #f9fafb;
+    padding: 20px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    border: 1px solid #e5e7eb;
+}
+
+.gallery-container {
+    background: white;
+    padding: 25px;
+    border-radius: 16px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+}
+
+.status-box {
+    background: #f8fafc;
+    padding: 20px;
+    border-radius: 12px;
+    border-left: 5px solid var(--primary-color);
+    margin-bottom: 20px;
+    font-size: 1.1em;
+}
+
+.footer {
+    text-align: center;
+    color: #666;
+    font-size: 0.9em;
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 1px solid #e5e7eb;
+}
+
+.tab-button {
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+}
+"""
+
+# Create the Gradio interface - FIXED: removed css from Blocks constructor
 with gr.Blocks(title="Pixazo Image Generator") as demo:
-    gr.Markdown("# 🎨 Pixazo Image Generator")
     
+    # Custom header
+    gr.HTML("""
+    <div class="header-container">
+        <div class="header-title">
+            🎨 Pixazo Image Generator
+        </div>
+        <div class="header-subtitle">
+            Generate stunning AI images with FLUX-1 Schnell model
+        </div>
+    </div>
+    """)
+    
+    # API Status
     api_key = get_api_key()
     if api_key:
-        gr.Markdown("✅ API Key: Configured")
+        gr.HTML(f"""
+        <div class="api-status api-status-success">
+            ✅ API Status: Connected • Key length: {len(api_key)} characters
+        </div>
+        """)
     else:
-        gr.Markdown("❌ API Key: Not configured. Set PIXAZO_API_KEY in secrets.")
+        gr.HTML("""
+        <div class="api-status api-status-error">
+            ❌ API Status: Not Configured
+            <br><small>Go to Space Settings → Repository secrets → Add: <code>PIXAZO_API_KEY</code> = your API key</small>
+        </div>
+        """)
     
-    with gr.Row():
-        with gr.Column():
-            prompt = gr.Textbox(label="Prompt", lines=3)
-            btn = gr.Button("Generate", variant="primary")
+    with gr.Row(equal_height=False):
+        # Left Column - Inputs
+        with gr.Column(scale=1, min_width=450):
+            # Prompt Section
+            with gr.Group(elem_classes="input-section"):
+                gr.Markdown("""
+                <div class="section-title">
+                    ✨ Image Description
+                </div>
+                """)
+                prompt = gr.Textbox(
+                    label="",
+                    placeholder="Describe the image you want to generate in detail...",
+                    lines=4,
+                    show_label=False,
+                    container=False
+                )
+            
+            # Parameters Section
+            with gr.Group(elem_classes="input-section"):
+                gr.Markdown("""
+                <div class="section-title">
+                    ⚙️ Generation Parameters
+                </div>
+                """)
+                
+                with gr.Row():
+                    style_preset = gr.Dropdown(
+                        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"
+                        ],
+                        value="none",
+                        info="Select an art style"
+                    )
+                
+                with gr.Row():
+                    guidance_scale = gr.Slider(
+                        label="🎯 Guidance Scale",
+                        minimum=1.0,
+                        maximum=20.0,
+                        value=7.5,
+                        step=0.5,
+                        info="Higher values = more prompt adherence"
+                    )
+                
+                with gr.Row():
+                    num_steps = gr.Slider(
+                        label="⚡ Inference Steps",
+                        minimum=1,
+                        maximum=100,
+                        value=4,
+                        step=1,
+                        info="More steps = better quality but slower"
+                    )
+                    
+                    seed = gr.Number(
+                        label="🌱 Seed",
+                        value=42,
+                        minimum=0,
+                        maximum=999999,
+                        info="0 for random, fixed for reproducible results"
+                    )
+                
+                with gr.Row():
+                    width = gr.Slider(
+                        label="📏 Width",
+                        minimum=256,
+                        maximum=2048,
+                        value=512,
+                        step=64,
+                        info="Image width in pixels"
+                    )
+                    
+                    height = gr.Slider(
+                        label="📐 Height",
+                        minimum=256,
+                        maximum=2048,
+                        value=512,
+                        step=64,
+                        info="Image height in pixels"
+                    )
+                
+                num_images = gr.Slider(
+                    label="🖼️ Number of Images",
+                    minimum=1,
+                    maximum=8,
+                    value=1,
+                    step=1,
+                    info="Generate multiple variations"
+                )
+            
+            # Action Buttons
+            with gr.Row():
+                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"
+                )
+            
+            # 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>
+                """)
+                
+                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")
+                ]
+                
+                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",
+                        variant="secondary",
+                        elem_classes="example-card"
+                    )
+                    
+                    def use_example(p=desc, s=style):
+                        return p, s
+                    
+                    example_btn.click(
+                        use_example,
+                        outputs=[prompt, style_preset]
+                    )
+        
+        # Right Column - Outputs
+        with gr.Column(scale=2, min_width=650):
+            # 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!",
+                interactive=False,
+                lines=2,
+                container=False,
+                elem_classes="status-box"
+            )
+            
+            # Gallery
+            with gr.Group(elem_classes="gallery-container"):
+                gallery = gr.Gallery(
+                    label="🎨 Generated Images",
+                    columns=3,
+                    height="auto",
+                    object_fit="contain",
+                    show_label=True,
+                    preview=True
+                )
+            
+            # Tabs for additional info
+            with gr.Tabs():
+                with gr.TabItem("📈 Generation Details"):
+                    json_output = gr.JSON(
+                        label="API Response & Metrics",
+                        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
+                    
+                    **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
+                    
+                    **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.
+                    """)
+    
+    # Footer
+    gr.HTML("""
+    <div class="footer">
+        <p>Built with ❤️ using Gradio • Powered by Pixazo FLUX-1 Schnell</p>
+        <p>Model: flux-1-schnell • Response Format: <code>{"output": "IMAGE_URL"}</code></p>
+    </div>
+    """)
+    
+    # Event Handlers
+    def on_generate(prompt, num_steps, seed, height, width, style_preset, num_images, guidance_scale):
+        if not prompt.strip():
+            yield None, "❌ Please enter a prompt first", {"error": "No prompt provided"}
+            return
         
-        with gr.Column():
-            image = gr.Image(label="Generated Image")
-            status = gr.Textbox(label="Status", interactive=False)
+        # 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
     
-    btn.click(generate_image, inputs=prompt, outputs=[image, status])
+    # Connect buttons
+    generate_btn.click(
+        fn=on_generate,
+        inputs=[prompt, num_steps, seed, height, width, style_preset, num_images, guidance_scale],
+        outputs=[gallery, status, json_output]
+    )
+    
+    clear_btn.click(
+        fn=on_clear,
+        outputs=[gallery, status, json_output]
+    )
 
+# Launch the app
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    print("=" * 60)
+    print("🚀 Pixazo Image Generator")
+    print("🎨 Beautiful UI with Gradio 6.2.0 - FIXED VERSION")
+    print(f"📦 Gradio Version: {gr.__version__}")
+    print(f"🔑 API Key Configured: {'Yes' if get_api_key() else 'No'}")
+    print("=" * 60)
+    
+    # Launch with css parameter in launch() method for Gradio 6.x
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        css=custom_css
+    )