Initial commit: Pete Studio with animated Three.js UI

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

.env.example

@@ -0,0 +1,6 @@
+# Environment variables for local testing
+# These will be set as Secrets in Hugging Face Space
+
+# For local testing only - in production, use HF Secrets
+REPLICATE_API_TOKEN=your_replicate_token_here
+HF_API_TOKEN=your_huggingface_token_here

.gitignore

@@ -0,0 +1,33 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+ENV/
+*.egg-info/
+dist/
+build/
+
+# Environment
+.env
+*.env
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Node
+node_modules/
+
+# API Keys (never commit these)
+api_keys/
+*.key

Dockerfile

@@ -0,0 +1,31 @@
+# Dockerfile for Hugging Face Space
+FROM python:3.11-slim
+
+# Hugging Face Spaces requirements
+RUN useradd -m -u 1000 user
+WORKDIR /app
+
+# Set environment variables for Hugging Face compatibility
+ENV HF_HOME=/tmp/huggingface \
+    TRANSFORMERS_CACHE=/tmp/huggingface/transformers \
+    HF_DATASETS_CACHE=/tmp/huggingface/datasets \
+    HUGGINGFACE_HUB_CACHE=/tmp/huggingface/hub \
+    XDG_CACHE_HOME=/tmp/huggingface \
+    PYTHONUNBUFFERED=1
+
+# Copy requirements and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY --chown=user . .
+
+# Switch to the non-root user (required by HF Spaces)
+USER user
+
+# Expose the port that HF Spaces expects
+EXPOSE 7860
+
+# Run the FastAPI application with uvicorn
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,33 @@
+---
+title: Pete Studio
+emoji: 🎨
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+---
+
+# Pete Studio
+
+Generate high-quality images from text descriptions with automatic API key rotation across multiple providers.
+
+## Features
+- Text-to-image generation with multiple AI providers
+- Automatic API key rotation and rate limit handling
+- Support for Replicate and Hugging Face inference APIs
+- Beautiful animated 3D interface with Three.js
+- PWA for mobile access
+- Local image saving
+
+## API Keys
+Configure your API keys in the app's settings panel:
+- **Replicate**: Get keys from [replicate.com](https://replicate.com)
+- **Hugging Face**: Get keys from [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)
+
+Add multiple comma-separated keys for automatic rotation when rate limits are hit.
+
+## Keyboard Shortcuts
+- `Ctrl+Enter`: Generate image
+- `Ctrl+S`: Save image

app/__init__.py

@@ -0,0 +1 @@
+# App module

app/image_generator.py

@@ -0,0 +1,122 @@
+import asyncio
+import httpx
+import base64
+from typing import Optional
+from .key_rotator import key_rotator
+
+class ImageGenerator:
+    """
+    Handles image generation requests with automatic provider selection and key rotation.
+    Supports multiple providers: Replicate, Hugging Face, and fallback options.
+    """
+    
+    PROVIDER_CONFIGS = {
+        'replicate': {
+            'url': 'https://api.replicate.com/v1/predictions',
+            'model': 'stability-ai/stable-diffusion:ac732df83cea7fff18b8472768c88ad041fa750ff7682a21affe81863cbe77e4',
+            'auth_header': 'Authorization',
+            'auth_prefix': 'Token '
+        },
+        'huggingface': {
+            'url': 'https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev',
+            'auth_header': 'Authorization',
+            'auth_prefix': 'Bearer '
+        }
+    }
+    
+    async def generate(self, prompt: str, provider: str = 'replicate', 
+                       width: int = 768, height: int = 768) -> Optional[str]:
+        """
+        Generate an image from text prompt.
+        Returns URL of generated image or None if failed.
+        """
+        # Get an available API key for the provider
+        api_key = key_rotator.get_next_key(provider)
+        if not api_key:
+            # Try fallback provider
+            fallback = 'huggingface' if provider != 'huggingface' else 'replicate'
+            return await self.generate(prompt, fallback, width, height)
+        
+        config = self.PROVIDER_CONFIGS.get(provider)
+        if not config:
+            return None
+        
+        try:
+            async with httpx.AsyncClient(timeout=120.0) as client:
+                headers = {
+                    config['auth_header']: f"{config['auth_prefix']}{api_key}",
+                    'Content-Type': 'application/json'
+                }
+                
+                if provider == 'replicate':
+                    payload = {
+                        'version': config['model'].split(':')[-1],
+                        'input': {
+                            'prompt': prompt,
+                            'width': width,
+                            'height': height,
+                            'num_outputs': 1
+                        }
+                    }
+                    
+                    # Create prediction
+                    response = await client.post(config['url'], headers=headers, json=payload)
+                    
+                    if response.status_code == 201:
+                        prediction = response.json()
+                        # Poll for completion
+                        get_url = prediction['urls']['get']
+                        for _ in range(30):  # Max 30 attempts
+                            await asyncio.sleep(2)
+                            status_response = await client.get(get_url, headers=headers)
+                            status_data = status_response.json()
+                            
+                            if status_data['status'] == 'succeeded':
+                                key_rotator.mark_success(api_key)
+                                return status_data['output'][0]
+                            elif status_data['status'] == 'failed':
+                                break
+                    
+                    elif response.status_code == 429:
+                        # Rate limit - check if it's daily or minute
+                        is_daily = 'daily' in str(response.text).lower()
+                        key_rotator.mark_rate_limit(api_key, is_daily_limit=is_daily)
+                    
+                    elif response.status_code in (401, 403):
+                        key_rotator.mark_failure(api_key, response.status_code)
+                
+                elif provider == 'huggingface':
+                    payload = {
+                        'inputs': prompt,
+                        'parameters': {
+                            'width': width,
+                            'height': height,
+                            'guidance_scale': 7.5
+                        }
+                    }
+                    
+                    response = await client.post(config['url'], headers=headers, json=payload)
+                    
+                    if response.status_code == 200:
+                        key_rotator.mark_success(api_key)
+                        # Return base64 encoded image
+                        image_b64 = base64.b64encode(response.content).decode('utf-8')
+                        return f"data:image/png;base64,{image_b64}"
+                    
+                    elif response.status_code == 429:
+                        key_rotator.mark_rate_limit(api_key)
+                    
+                    elif response.status_code in (401, 403):
+                        key_rotator.mark_failure(api_key, response.status_code)
+        
+        except Exception as e:
+            print(f"Generation error with {provider}: {e}")
+        
+        # If we got here, try fallback provider
+        fallback = 'huggingface' if provider == 'replicate' else 'replicate'
+        if fallback != provider:
+            return await self.generate(prompt, fallback, width, height)
+        
+        return None
+
+image_generator = ImageGenerator()

app/key_rotator.py

@@ -0,0 +1,117 @@
+import time
+from typing import Dict, List, Optional
+
+
+class KeyRotator:
+    """
+    Smart API key rotator with rate limit tracking and cooldown management.
+    Supports multiple providers and automatic failover.
+    """
+    
+    def __init__(self):
+        # Key pool: provider -> list of keys
+        self.key_pools: Dict[str, List[str]] = {}
+        # Key status: key -> {'status': 'active'/'cooling', 'cooldown_until': timestamp, 'model_limits': dict}
+        self.key_status: Dict[str, Dict] = {}
+        # Track which key was last used for round-robin
+        self.last_used_index: Dict[str, int] = {}
+    
+    def add_key(self, provider: str, api_key: str):
+        """Add an API key to the pool for a specific provider"""
+        if provider not in self.key_pools:
+            self.key_pools[provider] = []
+            self.last_used_index[provider] = -1
+        self.key_pools[provider].append(api_key)
+        self.key_status[api_key] = {
+            'status': 'active',
+            'cooldown_until': 0,
+            'rate_limit_count': 0,
+            'last_error': None
+        }
+    
+    def add_multiple_keys(self, provider: str, keys_string: str):
+        """Add multiple comma-separated keys"""
+        keys = [k.strip() for k in keys_string.split(',') if k.strip()]
+        for key in keys:
+            self.add_key(provider, key)
+    
+    def get_next_key(self, provider: str) -> Optional[str]:
+        """Get the next available active key using round-robin"""
+        if provider not in self.key_pools:
+            return None
+        
+        pool = self.key_pools[provider]
+        if not pool:
+            return None
+        
+        # Try up to len(pool) times to find an active key
+        for _ in range(len(pool)):
+            self.last_used_index[provider] = (self.last_used_index[provider] + 1) % len(pool)
+            candidate_key = pool[self.last_used_index[provider]]
+            
+            status = self.key_status.get(candidate_key, {})
+            if status.get('status') == 'active':
+                # Check if cooldown has expired
+                if status.get('cooldown_until', 0) <= time.time():
+                    return candidate_key
+                else:
+                    # Still cooling down, skip
+                    continue
+        
+        # No active keys found, return the first one anyway (will likely fail)
+        return pool[0] if pool else None
+    
+    def mark_rate_limit(self, api_key: str, model: str = None, is_daily_limit: bool = False):
+        """
+        Mark a key as rate-limited.
+        For daily limits: 24 hour cooldown
+        For minute limits: 60 second cooldown
+        """
+        if api_key not in self.key_status:
+            return
+        
+        cooldown_seconds = 24 * 3600 if is_daily_limit else 60
+        self.key_status[api_key]['status'] = 'cooling'
+        self.key_status[api_key]['cooldown_until'] = time.time() + cooldown_seconds
+        self.key_status[api_key]['rate_limit_count'] += 1
+        self.key_status[api_key]['last_error'] = f'rate_limit_{"daily" if is_daily_limit else "minute"}'
+    
+    def mark_failure(self, api_key: str, error_code: int):
+        """Mark a key as failed (403, 401) - permanently block it"""
+        if api_key not in self.key_status:
+            return
+        
+        if error_code in (401, 403):
+            self.key_status[api_key]['status'] = 'blocked'
+            self.key_status[api_key]['last_error'] = f'error_{error_code}'
+    
+    def mark_success(self, api_key: str):
+        """Reset any temporary cooldown on success"""
+        if api_key not in self.key_status:
+            return
+        self.key_status[api_key]['status'] = 'active'
+        self.key_status[api_key]['rate_limit_count'] = 0
+    
+    def get_status_summary(self) -> dict:
+        """Get summary of all keys for monitoring"""
+        summary = {}
+        for provider, keys in self.key_pools.items():
+            provider_summary = {
+                'total': len(keys),
+                'active': 0,
+                'cooling': 0,
+                'blocked': 0
+            }
+            for key in keys:
+                status = self.key_status.get(key, {}).get('status', 'active')
+                if status == 'active':
+                    provider_summary['active'] += 1
+                elif status == 'cooling':
+                    provider_summary['cooling'] += 1
+                else:
+                    provider_summary['blocked'] += 1
+            summary[provider] = provider_summary
+        return summary
+
+# Global instance
+key_rotator = KeyRotator()

app/main.py

@@ -0,0 +1,84 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from typing import Optional
+
+from .image_generator import image_generator
+from .key_rotator import key_rotator
+
+app = FastAPI(title="Pete Studio", description="Generate images with AI")
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Request/Response models
+class GenerateRequest(BaseModel):
+    prompt: str
+    width: int = 768
+    height: int = 768
+    provider: str = 'replicate'
+
+class GenerateResponse(BaseModel):
+    success: bool
+    image_url: Optional[str] = None
+    error: Optional[str] = None
+    provider_used: Optional[str] = None
+
+class KeyConfigRequest(BaseModel):
+    provider: str
+    keys: str
+
+# API Endpoints
+@app.get("/")
+async def root():
+    """Serve the frontend"""
+    return FileResponse("static/index.html")
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "key_status": key_rotator.get_status_summary()
+    }
+
+@app.post("/api/generate", response_model=GenerateResponse)
+async def generate_image(request: GenerateRequest):
+    """Generate an image from text prompt"""
+    try:
+        image_url = await image_generator.generate(
+            prompt=request.prompt,
+            provider=request.provider,
+            width=request.width,
+            height=request.height
+        )
+        
+        if image_url:
+            return GenerateResponse(
+                success=True,
+                image_url=image_url,
+                provider_used=request.provider
+            )
+        else:
+            return GenerateResponse(
+                success=False,
+                error="All providers failed or no API keys available"
+            )
+    except Exception as e:
+        return GenerateResponse(success=False, error=str(e))
+
+@app.post("/api/keys/configure")
+async def configure_keys(request: KeyConfigRequest):
+    """Configure API keys for a provider"""
+    key_rotator.add_multiple_keys(request.provider, request.keys)
+    return {"status": "success", "provider": request.provider, "keys_added": len(request.keys.split(','))}
+
+@app.get("/api/keys/status")
+async def get_key_status():
+    """Get current status of all API keys"""
+    return key_rotator.get_status_summary()
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,8 @@
+fastapi==0.115.0
+uvicorn[standard]==0.30.0
+python-multipart==0.0.12
+httpx==0.27.0
+pydantic==2.9.0
+python-dotenv==1.0.0
+aiofiles==24.1.0
+Pillow==10.4.0

static/index.html

@@ -0,0 +1,874 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>Pete Studio - AI Image Generator</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link rel="manifest" href="/static/manifest.json">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            overflow-x: hidden;
+            background: #0a0a0a;
+            color: white;
+        }
+
+        /* 3D Canvas Background */
+        #canvas-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a0a 100%);
+        }
+
+        /* Navigation */
+        nav {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            padding: 1.5rem 5%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 1000;
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.05);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.5px;
+        }
+
+        .nav-buttons {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+
+        .nav-btn {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 0.6rem 1.2rem;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.3s;
+            backdrop-filter: blur(10px);
+        }
+
+        .nav-btn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(102, 126, 234, 0.5);
+        }
+
+        /* Main Layout */
+        .app-container {
+            min-height: 100vh;
+            padding-top: 80px;
+            display: flex;
+            position: relative;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 380px;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            overflow-y: auto;
+            position: relative;
+            z-index: 10;
+        }
+
+        .input-group label {
+            display: block;
+            font-size: 0.85rem;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: rgba(255, 255, 255, 0.8);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .prompt-input {
+            width: 100%;
+            height: 150px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 12px;
+            padding: 1rem;
+            color: white;
+            font-family: inherit;
+            font-size: 1rem;
+            resize: vertical;
+            transition: all 0.3s;
+        }
+
+        .prompt-input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
+        }
+
+        .prompt-input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+        }
+
+        select {
+            width: 100%;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 12px;
+            padding: 0.8rem;
+            color: white;
+            font-size: 0.95rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        select option {
+            background: #1a1a2e;
+        }
+
+        .generate-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            color: white;
+            padding: 1.2rem;
+            border-radius: 12px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .generate-btn:hover:not(:disabled) {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
+        }
+
+        .generate-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        /* API Keys Section */
+        .api-keys-section {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 1rem;
+        }
+
+        .api-keys-section summary {
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.8);
+            font-weight: 500;
+            font-size: 0.9rem;
+            user-select: none;
+        }
+
+        .api-keys-section summary:hover {
+            color: #667eea;
+        }
+
+        .api-input-group {
+            margin-top: 1rem;
+        }
+
+        .api-input-group label {
+            display: block;
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.6);
+            margin-bottom: 0.4rem;
+        }
+
+        .api-input-group input {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            padding: 0.6rem;
+            color: white;
+            font-size: 0.85rem;
+            margin-bottom: 0.5rem;
+            font-family: monospace;
+        }
+
+        .api-input-group input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .api-input-group button {
+            background: rgba(102, 126, 234, 0.3);
+            border: 1px solid rgba(102, 126, 234, 0.5);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: all 0.3s;
+        }
+
+        .api-input-group button:hover {
+            background: rgba(102, 126, 234, 0.5);
+        }
+
+        .key-status {
+            margin-top: 1rem;
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.6);
+            padding: 0.5rem;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+        }
+
+        /* Canvas Area */
+        .canvas-area {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            position: relative;
+        }
+
+        #imageCanvas {
+            max-width: 100%;
+            max-height: calc(100vh - 120px);
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            display: none;
+        }
+
+        .image-placeholder {
+            text-align: center;
+            color: rgba(255, 255, 255, 0.3);
+            animation: fadeInUp 1s ease-out 0.4s both;
+        }
+
+        .image-placeholder svg {
+            margin-bottom: 1.5rem;
+            stroke: rgba(255, 255, 255, 0.3);
+            width: 80px;
+            height: 80px;
+        }
+
+        .image-placeholder p {
+            font-size: 1.1rem;
+        }
+
+        /* Loading Indicator */
+        .loading {
+            text-align: center;
+            padding: 1rem;
+            background: rgba(102, 126, 234, 0.1);
+            border: 1px solid rgba(102, 126, 234, 0.3);
+            border-radius: 12px;
+            color: #667eea;
+            font-size: 0.9rem;
+            display: none;
+        }
+
+        .loading.active {
+            display: block;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+
+        /* Animations */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Feature Cards (for stats/info) */
+        .stats-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem 5%;
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            gap: 2rem;
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            z-index: 100;
+        }
+
+        .stat-item {
+            text-align: center;
+        }
+
+        .stat-item h3 {
+            font-size: 1.5rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .stat-item p {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        /* Mobile Responsive */
+        @media (max-width: 1024px) {
+            .app-container {
+                flex-direction: column;
+            }
+
+            .sidebar {
+                width: 100%;
+                border-right: none;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                max-height: 50vh;
+            }
+
+            .canvas-area {
+                min-height: 50vh;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .sidebar {
+                padding: 1rem;
+            }
+
+            .nav-buttons {
+                gap: 0.5rem;
+            }
+
+            .nav-btn {
+                padding: 0.5rem 0.8rem;
+                font-size: 0.8rem;
+            }
+        }
+
+        /* Toast notifications */
+        .toast {
+            position: fixed;
+            bottom: 100px;
+            right: 2rem;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
+            color: white;
+            z-index: 2000;
+            animation: slideIn 0.3s ease-out;
+            max-width: 350px;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(400px);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        .toast.error {
+            border-color: rgba(255, 100, 100, 0.5);
+            background: rgba(255, 100, 100, 0.1);
+        }
+
+        .toast.success {
+            border-color: rgba(100, 255, 100, 0.5);
+            background: rgba(100, 255, 100, 0.1);
+        }
+    </style>
+</head>
+<body>
+
+    <!-- 3D Background -->
+    <div id="canvas-container"></div>
+
+    <!-- Navigation -->
+    <nav>
+        <div class="logo">PETE STUDIO</div>
+        <div class="nav-buttons">
+            <button id="saveBtn" class="nav-btn">💾 Save</button>
+            <button id="fullscreenBtn" class="nav-btn">⛶ Fullscreen</button>
+        </div>
+    </nav>
+
+    <!-- Main App -->
+    <div class="app-container">
+        <!-- Sidebar Controls -->
+        <aside class="sidebar">
+            <div class="input-group">
+                <label>Describe your image</label>
+                <textarea id="promptInput" class="prompt-input" placeholder="A serene mountain lake at sunset, digital art, highly detailed, cinematic lighting..."></textarea>
+            </div>
+
+            <div class="input-group">
+                <label>Dimensions</label>
+                <select id="sizeSelect">
+                    <option value="512x512">Square (512×512)</option>
+                    <option value="768x768" selected>Square (768×768)</option>
+                    <option value="1024x1024">Square (1024×1024)</option>
+                    <option value="1024x768">Landscape (1024×768)</option>
+                    <option value="768x1024">Portrait (768×1024)</option>
+                </select>
+            </div>
+
+            <div class="input-group">
+                <label>Provider</label>
+                <select id="providerSelect">
+                    <option value="replicate">Replicate (Stable Diffusion)</option>
+                    <option value="huggingface">Hugging Face (FLUX)</option>
+                </select>
+            </div>
+
+            <button id="generateBtn" class="generate-btn">✨ Generate Image</button>
+            <div id="loadingIndicator" class="loading">Generating... Please wait ⏳</div>
+
+            <!-- API Keys Configuration -->
+            <details class="api-keys-section">
+                <summary>🔑 Configure API Keys</summary>
+                <div class="api-input-group">
+                    <label>Replicate Keys (comma-separated):</label>
+                    <input type="text" id="replicateKeys" placeholder="r8_xxx, r8_yyy, r8_zzz">
+                    <button id="saveReplicateKeys">Save Replicate Keys</button>
+                </div>
+                <div class="api-input-group">
+                    <label>Hugging Face Keys (comma-separated):</label>
+                    <input type="text" id="hfKeys" placeholder="hf_xxx, hf_yyy, hf_zzz">
+                    <button id="saveHfKeys">Save HF Keys</button>
+                </div>
+                <div id="keyStatus" class="key-status"></div>
+            </details>
+        </aside>
+
+        <!-- Canvas Display Area -->
+        <main class="canvas-area">
+            <canvas id="imageCanvas"></canvas>
+            <div id="imagePlaceholder" class="image-placeholder">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <circle cx="8.5" cy="8.5" r="2.5"></circle>
+                    <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+                <p>Your generated image will appear here</p>
+            </div>
+        </main>
+    </div>
+
+    <!-- Stats Bar -->
+    <div class="stats-bar">
+        <div class="stat-item">
+            <h3 id="statGenerations">0</h3>
+            <p>Generations</p>
+        </div>
+        <div class="stat-item">
+            <h3 id="statActiveKeys">0</h3>
+            <p>Active Keys</p>
+        </div>
+        <div class="stat-item">
+            <h3 id="statProvider">-</h3>
+            <p>Last Provider</p>
+        </div>
+    </div>
+
+    <script>
+        // Three.js 3D Background Animation
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.getElementById('canvas-container').appendChild(renderer.domElement);
+
+        // Create particles
+        const particlesGeometry = new THREE.BufferGeometry();
+        const particlesCount = 1500;
+        const posArray = new Float32Array(particlesCount * 3);
+        const colorsArray = new Float32Array(particlesCount * 3);
+
+        for(let i = 0; i < particlesCount * 3; i += 3) {
+            posArray[i] = (Math.random() - 0.5) * 50;
+            posArray[i+1] = (Math.random() - 0.5) * 50;
+            posArray[i+2] = (Math.random() - 0.5) * 50;
+
+            colorsArray[i] = 0.4 + Math.random() * 0.4;
+            colorsArray[i+1] = 0.2 + Math.random() * 0.3;
+            colorsArray[i+2] = 0.8 + Math.random() * 0.2;
+        }
+
+        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+        particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorsArray, 3));
+
+        const particlesMaterial = new THREE.PointsMaterial({
+            size: 0.05,
+            vertexColors: true,
+            transparent: true,
+            opacity: 0.8,
+            blending: THREE.AdditiveBlending
+        });
+
+        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
+        scene.add(particlesMesh);
+
+        // Add floating geometric shapes
+        const geometries = [
+            new THREE.IcosahedronGeometry(1, 0),
+            new THREE.OctahedronGeometry(1, 0),
+            new THREE.TetrahedronGeometry(1, 0)
+        ];
+
+        const shapes = [];
+        const shapeCount = 15;
+
+        for(let i = 0; i < shapeCount; i++) {
+            const geometry = geometries[Math.floor(Math.random() * geometries.length)];
+            const material = new THREE.MeshBasicMaterial({
+                color: new THREE.Color().setHSL(0.6 + Math.random() * 0.2, 0.7, 0.5),
+                wireframe: true,
+                transparent: true,
+                opacity: 0.3
+            });
+
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(
+                (Math.random() - 0.5) * 40,
+                (Math.random() - 0.5) * 40,
+                (Math.random() - 0.5) * 40
+            );
+            mesh.rotation.set(
+                Math.random() * Math.PI,
+                Math.random() * Math.PI,
+                0
+            );
+
+            mesh.userData = {
+                rotationSpeed: {
+                    x: (Math.random() - 0.5) * 0.01,
+                    y: (Math.random() - 0.5) * 0.01,
+                    z: (Math.random() - 0.5) * 0.01
+                },
+                floatSpeed: Math.random() * 0.02 + 0.01,
+                floatOffset: Math.random() * Math.PI * 2
+            };
+
+            shapes.push(mesh);
+            scene.add(mesh);
+        }
+
+        camera.position.z = 30;
+
+        // Mouse interaction
+        let mouseX = 0;
+        let mouseY = 0;
+        let targetX = 0;
+        let targetY = 0;
+
+        const windowHalfX = window.innerWidth / 2;
+        const windowHalfY = window.innerHeight / 2;
+
+        document.addEventListener('mousemove', (event) => {
+            mouseX = (event.clientX - windowHalfX) / 100;
+            mouseY = (event.clientY - windowHalfY) / 100;
+        });
+
+        // Animation loop
+        const clock = new THREE.Clock();
+
+        function animate() {
+            requestAnimationFrame(animate);
+
+            const time = clock.getElapsedTime();
+
+            targetX = mouseX * 2;
+            targetY = mouseY * 2;
+
+            camera.position.x += (targetX - camera.position.x) * 0.05;
+            camera.position.y += (-targetY - camera.position.y) * 0.05;
+            camera.lookAt(scene.position);
+
+            particlesMesh.rotation.y = time * 0.05;
+            particlesMesh.rotation.x = time * 0.02;
+
+            shapes.forEach((shape) => {
+                shape.rotation.x += shape.userData.rotationSpeed.x;
+                shape.rotation.y += shape.userData.rotationSpeed.y;
+                shape.rotation.z += shape.userData.rotationSpeed.z;
+                shape.position.y += Math.sin(time * shape.userData.floatSpeed + shape.userData.floatOffset) * 0.02;
+            });
+
+            const positions = particlesGeometry.attributes.position.array;
+            for(let i = 0; i < particlesCount * 3; i += 3) {
+                positions[i+1] += Math.sin(time * 0.5 + positions[i] * 0.1) * 0.02;
+            }
+            particlesGeometry.attributes.position.needsUpdate = true;
+
+            renderer.render(scene, camera);
+        }
+
+        animate();
+
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        // ==================== APP LOGIC ====================
+        const API_BASE = '';
+        let currentImageUrl = null;
+        let generationCount = 0;
+
+        // DOM Elements
+        const promptInput = document.getElementById('promptInput');
+        const generateBtn = document.getElementById('generateBtn');
+        const loadingIndicator = document.getElementById('loadingIndicator');
+        const imageCanvas = document.getElementById('imageCanvas');
+        const imagePlaceholder = document.getElementById('imagePlaceholder');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const saveBtn = document.getElementById('saveBtn');
+        const sizeSelect = document.getElementById('sizeSelect');
+        const providerSelect = document.getElementById('providerSelect');
+        const saveReplicateKeys = document.getElementById('saveReplicateKeys');
+        const saveHfKeys = document.getElementById('saveHfKeys');
+        const replicateKeysInput = document.getElementById('replicateKeys');
+        const hfKeysInput = document.getElementById('hfKeys');
+        const keyStatusDiv = document.getElementById('keyStatus');
+        const ctx = imageCanvas.getContext('2d');
+
+        // Toast notification
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => toast.remove(), 3000);
+        }
+
+        // Load saved API keys from localStorage
+        function loadSavedKeys() {
+            const savedReplicate = localStorage.getItem('replicate_keys');
+            const savedHf = localStorage.getItem('hf_keys');
+            
+            if (savedReplicate) {
+                replicateKeysInput.value = savedReplicate;
+                configureKeys('replicate', savedReplicate);
+            }
+            if (savedHf) {
+                hfKeysInput.value = savedHf;
+                configureKeys('huggingface', savedHf);
+            }
+        }
+
+        // Configure API keys for a provider
+        async function configureKeys(provider, keysString) {
+            try {
+                const response = await fetch(`${API_BASE}/api/keys/configure`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ provider, keys: keysString })
+                });
+                
+                if (response.ok) {
+                    console.log(`Configured ${provider} keys`);
+                    await updateKeyStatus();
+                }
+            } catch (error) {
+                console.error(`Failed to configure ${provider} keys:`, error);
+            }
+        }
+
+        // Update key status display
+        async function updateKeyStatus() {
+            try {
+                const response = await fetch(`${API_BASE}/api/keys/status`);
+                const status = await response.json();
+                
+                let html = '';
+                let totalActive = 0;
+                for (const [provider, data] of Object.entries(status)) {
+                    html += `<div><strong>${provider}:</strong> ${data.active}/${data.total} active (${data.cooling} cooling, ${data.blocked} blocked)</div>`;
+                    totalActive += data.active;
+                }
+                keyStatusDiv.innerHTML = html || '<div>No keys configured</div>';
+                document.getElementById('statActiveKeys').textContent = totalActive;
+            } catch (error) {
+                console.error('Failed to get key status:', error);
+            }
+        }
+
+        // Generate image
+        async function generateImage() {
+            const prompt = promptInput.value.trim();
+            if (!prompt) {
+                showToast('Please enter a prompt', 'error');
+                return;
+            }
+            
+            const size = sizeSelect.value;
+            const [width, height] = size.split('x').map(Number);
+            const provider = providerSelect.value;
+            
+            generateBtn.disabled = true;
+            loadingIndicator.classList.add('active');
+            
+            try {
+                const response = await fetch(`${API_BASE}/api/generate`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt, width, height, provider })
+                });
+                
+                const result = await response.json();
+                
+                if (result.success && result.image_url) {
+                    currentImageUrl = result.image_url;
+                    const img = new Image();
+                    img.onload = () => {
+                        imageCanvas.width = img.width;
+                        imageCanvas.height = img.height;
+                        ctx.drawImage(img, 0, 0);
+                        imageCanvas.style.display = 'block';
+                        imagePlaceholder.style.display = 'none';
+                        generationCount++;
+                        document.getElementById('statGenerations').textContent = generationCount;
+                        document.getElementById('statProvider').textContent = result.provider_used || '-';
+                    };
+                    img.onerror = () => {
+                        showToast('Failed to load image', 'error');
+                    };
+                    img.src = result.image_url;
+                    showToast('Image generated successfully!', 'success');
+                } else {
+                    showToast(`Generation failed: ${result.error || 'Unknown error'}`, 'error');
+                }
+            } catch (error) {
+                showToast(`Error: ${error.message}`, 'error');
+            } finally {
+                generateBtn.disabled = false;
+                loadingIndicator.classList.remove('active');
+            }
+        }
+
+        // Save current image locally
+        function saveImage() {
+            if (!currentImageUrl) {
+                showToast('No image to save', 'error');
+                return;
+            }
+            
+            const link = document.createElement('a');
+            link.download = `pete-studio-${Date.now()}.png`;
+            link.href = currentImageUrl;
+            link.click();
+            showToast('Image saved!', 'success');
+        }
+
+        // Fullscreen mode
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+                fullscreenBtn.textContent = '✕ Exit';
+            } else {
+                document.exitFullscreen();
+                fullscreenBtn.textContent = '⛶ Fullscreen';
+            }
+        }
+
+        document.addEventListener('fullscreenchange', () => {
+            if (!document.fullscreenElement) {
+                fullscreenBtn.textContent = '⛶ Fullscreen';
+            }
+        });
+
+        // Event listeners
+        generateBtn.addEventListener('click', generateImage);
+        fullscreenBtn.addEventListener('click', toggleFullscreen);
+        saveBtn.addEventListener('click', saveImage);
+
+        saveReplicateKeys.addEventListener('click', () => {
+            const keys = replicateKeysInput.value.trim();
+            if (keys) {
+                localStorage.setItem('replicate_keys', keys);
+                configureKeys('replicate', keys);
+                showToast('Replicate keys saved', 'success');
+            }
+        });
+
+        saveHfKeys.addEventListener('click', () => {
+            const keys = hfKeysInput.value.trim();
+            if (keys) {
+                localStorage.setItem('hf_keys', keys);
+                configureKeys('huggingface', keys);
+                showToast('Hugging Face keys saved', 'success');
+            }
+        });
+
+        // Initialize
+        loadSavedKeys();
+        updateKeyStatus();
+        setInterval(updateKeyStatus, 30000);
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'Enter') {
+                e.preventDefault();
+                generateImage();
+            }
+            if (e.ctrlKey && e.key === 's') {
+                e.preventDefault();
+                saveImage();
+            }
+        });
+    </script>
+</body>
+</html>

static/manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "Pete Studio",
+    "short_name": "Pete Studio",
+    "description": "Generate high-quality images from text with AI",
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#0a0a0a",
+    "background_color": "#0a0a0a",
+    "icons": [
+        {
+            "src": "/static/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}