setup demo app on hf

first pass and getting it running

.dockerignore

@@ -0,0 +1,67 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+hf/
+venv/
+env/
+ENV/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment files
+.env
+.env.local
+.env.example
+
+# Logs
+*.log
+
+# Cache
+.cache/
+.pytest_cache/
+
+# Model outputs
+*.png
+*.jpg
+*.jpeg
+
+# Git
+.git/
+.gitignore
+
+# Documentation
+README.md
+CHANGELOG.md
+LICENSE
+
+# Scripts
+create_cdp_wallet.py
+generate_image.py

Dockerfile

@@ -0,0 +1,58 @@
+# Use Python 3.11 slim image for better compatibility with HF Spaces
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    git \
+    curl \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better Docker layer caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY . .
+
+# Create directories for models and cache
+RUN mkdir -p /app/cache /app/models
+
+# Set environment variables for HF Spaces
+ENV PYTHONPATH=/app
+ENV PYTHONUNBUFFERED=1
+ENV HF_HOME=/app/cache
+ENV TRANSFORMERS_CACHE=/app/cache
+ENV TORCH_HOME=/app/cache
+
+# Pre-download models to reduce startup time
+RUN python -c "
+from transformers import pipeline, AutoTokenizer, AutoModelForCausalLM, AutoModelForSequenceClassification
+import torch
+
+print('📦 Pre-downloading DistilGPT-2...')
+tokenizer = AutoTokenizer.from_pretrained('distilgpt2')
+model = AutoModelForCausalLM.from_pretrained('distilgpt2')
+
+print('📦 Pre-downloading RoBERTa sentiment model...')
+sentiment_model = AutoModelForSequenceClassification.from_pretrained('cardiffnlp/twitter-roberta-base-sentiment-latest')
+sentiment_tokenizer = AutoTokenizer.from_pretrained('cardiffnlp/twitter-roberta-base-sentiment-latest')
+
+print('✅ Models downloaded successfully!')
+"
+
+# Expose port 7860 (HF Spaces default)
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=60s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -1,12 +1,42 @@
----
-title: X402 Fast Payout Demo
-emoji: 🐨
-colorFrom: indigo
-colorTo: green
-sdk: docker
-pinned: false
-license: mit
-short_description: Coinbase x402 + CDP Hackathon project featuring fastapi-x402
+# 🤗 x402 AI Demo - Pay-per-use AI Services
+
+A FastAPI demonstration of micropayments for AI services using the x402 protocol.
+
+## 🚀 Features
+
+- **💭 Text Generation** - DistilGPT-2 ($0.01 per request)
+- **😊 Sentiment Analysis** - RoBERTa ($0.005 per request)  
+- **🖼️ Image Generation** - Amazon Nova Canvas ($0.02 per request)
+- **💰 Automatic Revenue Splitting** - CDP Wallet integration
+- **🔐 MetaMask Integration** - Seamless crypto payments
+
+## 🔧 How It Works
+
+1. Connect your MetaMask wallet to Base Sepolia testnet
+2. Click a service button to make a request
+3. Sign the x402 payment with your wallet
+4. AI service processes your request
+5. Revenue is automatically split between stakeholders
+
+## 💡 Demo Mode
+
+This is running on **Base Sepolia testnet** - no real money required! Get testnet USDC from the [Base Sepolia faucet](https://www.coinbase.com/faucets/base-ethereum-sepolia-faucet).
+
+## 🏗️ Technology Stack
+
+- **Backend**: FastAPI with x402 payment protocol
+- **Frontend**: HTML/CSS/JavaScript with MetaMask integration
+- **AI Models**: Hugging Face Transformers (DistilGPT-2, RoBERTa)
+- **Image Generation**: AWS Bedrock Nova Canvas
+- **Payments**: Base Sepolia testnet with USDC
+- **Revenue Splitting**: Coinbase Developer Platform (CDP)
+
+## 🔗 Links
+
+- [x402 Protocol](https://github.com/sourcegraph/fastapi-x402)
+- [Base Sepolia Faucet](https://www.coinbase.com/faucets/base-ethereum-sepolia-faucet)
+- [MetaMask Download](https://metamask.io/)
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Built with ❤️ using FastAPI, Hugging Face, and the x402 payment protocol.

app.py

@@ -0,0 +1,470 @@
+"""
+FastAPI x402 Demo for Hugging Face Spaces
+A pay-per-use AI service with lightweight models
+"""
+
+import os
+import time
+import base64
+import json
+import random
+import asyncio
+from typing import Dict, Any
+from dotenv import load_dotenv
+from fastapi import FastAPI, Request, HTTPException, APIRouter
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+import torch
+from transformers import pipeline
+from web3 import Web3
+
+# New imports for CDP and AWS
+import boto3
+from cdp.cdp_client import CdpClient
+from events import push
+
+# Load environment variables
+load_dotenv()
+
+# Environment validation
+REQUIRED_VARS = [
+    "PAY_TO_ADDRESS",  # Required by fastapi-x402 package
+]
+
+# CDP and AWS variables (only required if using those features)
+CDP_VARS = ["CDP_API_KEY", "DEV_WALLET", "HF_WALLET", "AWS_WALLET"]
+AWS_VARS = ["AWS_ACCESS_KEY_ID", "AWS_SECRET_ACCESS_KEY", "AWS_REGION"]
+
+# Check required variables
+for var in REQUIRED_VARS:
+    if not os.getenv(var):
+        raise ValueError(f"Missing required environment variable: {var}")
+
+# Check CDP variables (warn if missing but don't fail)
+CDP_ENABLED = all(os.getenv(var) for var in CDP_VARS)
+if not CDP_ENABLED:
+    print(f"⚠️  CDP revenue splitting disabled. Missing: {[v for v in CDP_VARS if not os.getenv(v)]}")
+
+# Check AWS variables (warn if missing but don't fail)  
+AWS_ENABLED = all(os.getenv(var) for var in AWS_VARS)
+if not AWS_ENABLED:
+    print(f"⚠️  AWS Bedrock image generation disabled. Missing: {[v for v in AWS_VARS if not os.getenv(v)]}")
+
+# Initialize FastAPI and x402
+from fastapi_x402 import init_x402, pay
+
+app = FastAPI(title="x402 AI Demo", description="Pay-per-use AI services")
+
+# Add CORS middleware for web frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+    expose_headers=["*"],
+)
+
+# Initialize x402 with testnet for demo
+init_x402(app, network=os.getenv("X402_NETWORK", "base-sepolia"))
+
+# Setup templates and static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+# Load lightweight AI models
+print("🤖 Loading AI models...")
+
+# Use DistilGPT-2 - much smaller than GPT-2 but still capable
+text_generator = pipeline(
+    "text-generation", 
+    model="distilgpt2",
+    device=0 if torch.cuda.is_available() else -1
+)
+
+# Use a simple sentiment analysis model as second service
+sentiment_analyzer = pipeline(
+    "sentiment-analysis",
+    model="cardiffnlp/twitter-roberta-base-sentiment-latest",
+    device=0 if torch.cuda.is_available() else -1
+)
+
+print("✅ Models loaded successfully!")
+
+# AWS Bedrock setup
+if AWS_ENABLED:
+    AWS_REGION = os.getenv("AWS_REGION", "us-west-2")
+    bedrock = boto3.client("bedrock-runtime", region_name=AWS_REGION)
+    print(f"✅ AWS Bedrock client initialized in {AWS_REGION}")
+    
+    def nova_canvas(prompt: str, h=512, w=512):
+        """Generate image using Amazon Nova Canvas."""
+        seed = random.randint(0, 858_993_460)
+        payload = {
+            "taskType": "TEXT_IMAGE",
+            "textToImageParams": {"text": prompt},
+            "imageGenerationConfig": {
+                "seed": seed, 
+                "quality": "standard",
+                "height": h, 
+                "width": w, 
+                "numberOfImages": 1,
+            },
+        }
+        try:
+            resp = bedrock.invoke_model(
+                modelId="amazon.nova-canvas-v1:0",
+                body=json.dumps(payload),
+            )
+            img_b64 = json.loads(resp["body"].read())["images"][0]
+            return img_b64
+        except Exception as e:
+            push("error", service="bedrock", error=str(e))
+            raise HTTPException(500, f"Bedrock error: {str(e)}")
+else:
+    def nova_canvas(prompt: str, h=512, w=512):
+        raise HTTPException(503, "AWS Bedrock not configured")
+
+# CDP revenue splitting setup
+if CDP_ENABLED:
+    split_router = APIRouter()
+    
+    SPLITS = [
+        {"wallet": os.environ["DEV_WALLET"], "pct": 30},
+        {"wallet": os.environ["HF_WALLET"], "pct": 30},
+        {"wallet": os.environ["AWS_WALLET"], "pct": 30},
+    ]  # 10% stays in collection wallet
+    print(f"✅ CDP revenue splitting enabled with {len(SPLITS)} recipients")
+    
+    async def split_revenue(amount_usdc: float):
+        """Split revenue using CDP transfers"""
+        try:
+            async with CdpClient() as cdp:
+                # Get our collection account
+                sender = await cdp.evm.get_or_create_account(name="fastx402-demo")
+                
+                for split in SPLITS:
+                    split_amount = amount_usdc * (split["pct"] / 100)
+                    amount_wei = Web3.toWei(split_amount, "ether")  # Convert to wei
+                    
+                    # Transfer to recipient
+                    tx_hash = await sender.transfer(
+                        to=split["wallet"],
+                        amount=amount_wei,
+                        token="usdc",
+                        network="base-sepolia"
+                    )
+                    
+                    push("payout", 
+                         to=split["wallet"][:8] + "...", 
+                         usdc=split_amount, 
+                         pct=split["pct"],
+                         tx_hash=str(tx_hash)[:10])
+                    
+                    print(f"💸 Sent ${split_amount:.4f} USDC to {split['wallet'][:10]}...")
+                
+                return True
+                
+        except Exception as e:
+            push("payout_error", error=str(e), amount=amount_usdc)
+            print(f"❌ Revenue split error: {e}")
+            return False
+    
+    @split_router.post("/trigger-split")
+    async def trigger_split(amount: float = 0.01):
+        """Manual endpoint to trigger revenue splitting (for testing)"""
+        success = await split_revenue(amount)
+        return {"success": success, "amount": amount, "splits": len(SPLITS)}
+    
+    # Register CDP router with app
+    app.include_router(split_router)
+
+# Request models
+class TextRequest(BaseModel):
+    prompt: str
+
+class SentimentRequest(BaseModel):
+    text: str
+
+# Routes
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    """Serve the main demo page"""
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "models_loaded": True}
+
+@app.post("/generate-text")
+@pay("$0.01")  # 1 cent for text generation
+async def generate_text(request: TextRequest):
+    """Generate text using DistilGPT-2"""
+    try:
+        print(f"💭 Generating text for: '{request.prompt}'")
+        push("paid_inference", service="text-gen", usdc=0.01, prompt=request.prompt[:50])
+        
+        result = text_generator(
+            request.prompt, 
+            max_new_tokens=50,
+            num_return_sequences=1,
+            temperature=0.8,
+            do_sample=True,
+            pad_token_id=text_generator.tokenizer.eos_token_id
+        )[0]['generated_text']
+        
+        push("inference_success", service="text-gen", length=len(result))
+        
+        # Trigger revenue split for successful payment
+        if CDP_ENABLED:
+            asyncio.create_task(split_revenue(0.01))
+        
+        return {"result": result, "model": "distilgpt2"}
+    except Exception as e:
+        print(f"❌ Text generation error: {e}")
+        push("inference_error", service="text-gen", error=str(e))
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+@app.post("/analyze-sentiment")
+@pay("$0.005")  # Half cent for sentiment analysis
+async def analyze_sentiment(request: SentimentRequest):
+    """Analyze sentiment using RoBERTa"""
+    try:
+        print(f"😊 Analyzing sentiment for: '{request.text}'")
+        push("paid_inference", service="sentiment", usdc=0.005, text=request.text[:50])
+        
+        result = sentiment_analyzer(request.text)[0]
+        
+        push("inference_success", service="sentiment", sentiment=result["label"], confidence=result["score"])
+        
+        # Trigger revenue split for successful payment
+        if CDP_ENABLED:
+            asyncio.create_task(split_revenue(0.005))
+        
+        return {
+            "text": request.text,
+            "sentiment": result["label"],
+            "confidence": round(result["score"], 3),
+            "model": "twitter-roberta-base-sentiment"
+        }
+    except Exception as e:
+        print(f"❌ Sentiment analysis error: {e}")
+        push("inference_error", service="sentiment", error=str(e))
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+# Add image generation request model
+class ImageRequest(BaseModel):
+    prompt: str
+
+@app.post("/generate-image")
+@pay("$0.02")  # 2 cents for image generation
+async def generate_image(request: ImageRequest):
+    """Generate image using Amazon Nova Canvas"""
+    try:
+        print(f"🖼️ Generating image for: '{request.prompt}'")
+        push("paid_inference", service="image-gen", usdc=0.02, prompt=request.prompt[:50])
+        
+        img_b64 = nova_canvas(request.prompt)
+        
+        push("inference_success", service="image-gen", size="512x512")
+        
+        # Trigger revenue split for successful payment
+        if CDP_ENABLED:
+            asyncio.create_task(split_revenue(0.02))
+        
+        return {
+            "image": img_b64, 
+            "model": "nova-canvas-v1", 
+            "prompt": request.prompt
+        }
+    except Exception as e:
+        print(f"❌ Image generation error: {e}")
+        push("inference_error", service="image-gen", error=str(e))
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+@app.get("/debug")
+async def debug_info():
+    """Debug endpoint to check x402 configuration"""
+    from fastapi_x402.core import get_config, get_facilitator_client
+    
+    config = get_config()
+    facilitator = get_facilitator_client()
+    
+    return {
+        "network": config.network,
+        "facilitator_url": facilitator.base_url,
+        "is_coinbase_cdp": facilitator.is_coinbase_cdp,
+        "device": "cuda" if torch.cuda.is_available() else "cpu",
+        "models": ["distilgpt2", "twitter-roberta-base-sentiment"],
+        "features": {
+            "cdp_enabled": CDP_ENABLED,
+            "aws_enabled": AWS_ENABLED
+        }
+    }
+
+# Live dashboard and events API
+@app.get("/events")
+async def get_events():
+    """Get real-time events for dashboard (JSON feed for JS)"""
+    from events import dump
+    return JSONResponse(dump())
+
+@app.get("/splits")
+async def get_splits():
+    """Get revenue split configuration"""
+    if not CDP_ENABLED:
+        return {"error": "CDP not enabled"}
+    return {
+        "splits": SPLITS,
+        "collection_account": "fastx402-demo",
+        "reserve_percentage": 10
+    }
+
+@app.get("/dashboard", response_class=HTMLResponse)
+async def dashboard(refresh_rate: int = 2000):
+    """Live revenue split dashboard"""
+    return f"""
+<!doctype html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <title>x402 Live Revenue Dashboard</title>
+    <style>
+        body {{ font-family: sans-serif; margin: 40px; background: #f8fafc; }}
+        .container {{ max-width: 1200px; margin: 0 auto; }}
+        .header {{ background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }}
+        .stats {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }}
+        .stat-card {{ background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }}
+        .stat-value {{ font-size: 2em; font-weight: bold; color: #059669; }}
+        .stat-label {{ color: #6b7280; font-size: 0.9em; }}
+        table {{ width: 100%; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }}
+        th, td {{ padding: 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }}
+        th {{ background: #f9fafb; font-weight: 600; }}
+        .event-paid {{ background: #ecfdf5; }}
+        .event-deposit {{ background: #fef3c7; }}
+        .event-payout {{ background: #e0f2fe; }}
+        .event-error {{ background: #fef2f2; }}
+        .refresh-info {{ color: #6b7280; font-size: 0.8em; margin-top: 10px; }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚀 x402 Live Revenue Dashboard</h1>
+            <p>Real-time payment and revenue splitting activity</p>
+            <div class="refresh-info">Auto-refreshes every {refresh_rate/1000}s</div>
+        </div>
+        
+        <div class="stats" id="stats">
+            <div class="stat-card">
+                <div class="stat-value" id="total-payments">0</div>
+                <div class="stat-label">Total Payments</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="total-revenue">$0.00</div>
+                <div class="stat-label">Total Revenue</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="total-payouts">0</div>
+                <div class="stat-label">Payouts Made</div>
+            </div>
+        </div>
+        
+        <table>
+            <thead>
+                <tr>
+                    <th>Time</th>
+                    <th>Event</th>
+                    <th>Details</th>
+                </tr>
+            </thead>
+            <tbody id="events-log"></tbody>
+        </table>
+    </div>
+
+    <script>
+        let totalPayments = 0;
+        let totalRevenue = 0;
+        let totalPayouts = 0;
+        
+        async function updateDashboard() {{
+            try {{
+                const response = await fetch('/events');
+                const events = await response.json();
+                
+                // Reset counters
+                totalPayments = 0;
+                totalRevenue = 0;
+                totalPayouts = 0;
+                
+                // Update event log
+                const tbody = document.getElementById('events-log');
+                tbody.innerHTML = '';
+                
+                events.forEach(event => {{
+                    const row = document.createElement('tr');
+                    let className = '';
+                    let details = '';
+                    
+                    // Calculate stats and format details
+                    switch(event.kind) {{
+                        case 'paid_inference':
+                            totalPayments++;
+                            totalRevenue += event.usdc || 0;
+                            className = 'event-paid';
+                            details = `Service: ${{event.service}}, Amount: $${{(event.usdc || 0).toFixed(3)}}`;
+                            break;
+                        case 'deposit':
+                            className = 'event-deposit';
+                            details = `TX: ${{event.tx}}, Amount: $${{(event.usdc || 0).toFixed(3)}}`;
+                            break;
+                        case 'payout':
+                            totalPayouts++;
+                            className = 'event-payout';
+                            details = `To: ${{event.to}}, Amount: $${{(event.usdc || 0).toFixed(3)}} (${{event.pct}}%)`;
+                            break;
+                        case 'inference_error':
+                        case 'error':
+                        case 'webhook_error':
+                            className = 'event-error';
+                            details = `Error: ${{event.error}}`;
+                            break;
+                        default:
+                            details = JSON.stringify(event);
+                    }}
+                    
+                    row.className = className;
+                    row.innerHTML = `
+                        <td>${{event.t}}</td>
+                        <td>${{event.kind}}</td>
+                        <td>${{details}}</td>
+                    `;
+                    tbody.appendChild(row);
+                }});
+                
+                // Update stats
+                document.getElementById('total-payments').textContent = totalPayments;
+                document.getElementById('total-revenue').textContent = `$${{totalRevenue.toFixed(3)}}`;
+                document.getElementById('total-payouts').textContent = totalPayouts;
+                
+            }} catch (error) {{
+                console.error('Dashboard update failed:', error);
+            }}
+        }}
+        
+        // Initial load and periodic updates
+        updateDashboard();
+        setInterval(updateDashboard, {refresh_rate});
+    </script>
+</body>
+</html>
+"""
+
+if __name__ == "__main__":
+    import uvicorn
+    # Disable uvloop to avoid async context issues, use standard asyncio instead
+    uvicorn.run(app, host="0.0.0.0", port=7860, loop="asyncio")

deploy.md

@@ -0,0 +1,69 @@
+# 🚀 Deploying to Hugging Face Spaces
+
+## Quick Setup
+
+1. **Create a new Space**:
+   - Go to https://huggingface.co/new-space
+   - Choose "Docker" as SDK
+   - Set visibility to "Public"
+
+2. **Upload Files**:
+   Upload these files to your Space repository:
+   ```
+   app.py
+   events.py
+   requirements.txt
+   Dockerfile
+   .dockerignore
+   templates/
+   static/
+   ```
+
+3. **Set Environment Variables**:
+   In your Space settings, add these secrets:
+   
+   **Required:**
+   - `PAY_TO_ADDRESS`: Your wallet address for receiving payments
+   - `X402_NETWORK`: `base-sepolia`
+   
+   **Optional (for revenue splitting):**
+   - `CDP_API_KEY_ID`: Your CDP API key ID
+   - `CDP_API_KEY_SECRET`: Your CDP API key secret  
+   - `CDP_WALLET_SECRET`: Your CDP wallet secret
+   - `DEV_WALLET`: Developer wallet address
+   - `HF_WALLET`: Hugging Face wallet address
+   - `AWS_WALLET`: AWS wallet address
+   
+   **Optional (for image generation):**
+   - `AWS_ACCESS_KEY_ID`: Your AWS access key
+   - `AWS_SECRET_ACCESS_KEY`: Your AWS secret key
+   - `AWS_REGION`: `us-east-1`
+
+4. **Build and Deploy**:
+   - Push files to your Space repository
+   - HF Spaces will automatically build using the Dockerfile
+   - First build takes ~5-10 minutes (downloading models)
+   - Subsequent builds are faster due to Docker layer caching
+
+## Testing
+
+1. Visit your Space URL
+2. Connect MetaMask to Base Sepolia
+3. Get testnet USDC from [Base Sepolia faucet](https://www.coinbase.com/faucets/base-ethereum-sepolia-faucet)
+4. Test the three services:
+   - Text Generation ($0.01)
+   - Sentiment Analysis ($0.005) 
+   - Image Generation ($0.02)
+
+## Troubleshooting
+
+- **Build fails**: Check logs for missing dependencies
+- **Models loading slowly**: First startup takes time to download models
+- **Payment fails**: Ensure MetaMask is on Base Sepolia with testnet USDC
+- **Image generation fails**: Check AWS credentials and Bedrock model access
+
+## Performance Notes
+
+- **Memory**: ~4GB for all models
+- **Startup**: ~30-60 seconds after build
+- **Cold start**: ~10-20 seconds on first request

events.py

@@ -0,0 +1,27 @@
+# events.py - In-memory event logging for real-time dashboard
+import collections
+import threading
+import time
+from typing import Dict, List, Any
+
+_LOG = collections.deque(maxlen=50)
+_LOCK = threading.Lock()
+
+def push(kind: str, **kv) -> None:
+    """Add an event to the log with timestamp."""
+    with _LOCK:
+        _LOG.appendleft({
+            "t": time.strftime("%H:%M:%S"), 
+            "kind": kind, 
+            **kv
+        })
+
+def dump() -> List[Dict[str, Any]]:
+    """Get all logged events (most recent first)."""
+    with _LOCK:
+        return list(_LOG)
+
+def clear() -> None:
+    """Clear all logged events."""
+    with _LOCK:
+        _LOG.clear()

requirements.txt

@@ -0,0 +1,24 @@
+# FastAPI and x402
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+python-dotenv>=1.0.0
+fastapi-x402>=0.1.6
+
+# AI/ML libraries  
+torch>=2.0.0
+transformers>=4.35.0
+accelerate>=0.24.0
+
+# Web framework dependencies
+jinja2>=3.1.0
+python-multipart>=0.0.6
+pydantic>=2.0.0
+aiofiles>=23.0.0
+
+# Optional: for better performance
+# tokenizers>=0.15.0
+
+# New additions for CDP and AWS Bedrock
+boto3>=1.34.0
+cdp-sdk>=0.21.0
+web3>=6.0.0

static/style.css

@@ -0,0 +1,71 @@
+/* Custom styles for x402 AI Demo */
+
+.btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
+}
+
+.btn-primary {
+    @apply bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed;
+}
+
+.price-tag {
+    @apply inline-block bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full mb-3;
+}
+
+.service-card {
+    @apply border-t-4 border-blue-500;
+}
+
+.result-box {
+    @apply min-h-16 p-4 bg-gray-50 rounded-lg border;
+}
+
+.loading {
+    @apply text-center text-gray-600 animate-pulse;
+}
+
+.success-result {
+    @apply p-4 bg-green-50 border border-green-200 rounded-lg;
+}
+
+.error-result {
+    @apply p-4 bg-red-50 border border-red-200 rounded-lg;
+}
+
+.payment-required {
+    @apply p-4 bg-orange-50 border border-orange-200 rounded-lg;
+}
+
+.sentiment-result {
+    @apply text-center py-2;
+}
+
+/* Loading animation */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Code blocks */
+code {
+    @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono;
+}
+
+pre {
+    @apply text-xs font-mono whitespace-pre-wrap;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .container {
+        @apply px-2;
+    }
+    
+    .service-card {
+        @apply p-4;
+    }
+}

templates/index.html

@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>x402 AI Demo - Pay-per-use AI Services</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-900 mb-4">🤗 x402 AI Demo 🤗</h1>
+            <p class="text-xl text-gray-600">Pay-per-use AI services powered by FastAPI and fastapi-x402</p>
+            <div class="mt-4 p-4 bg-blue-50 rounded-lg">
+                <p class="text-sm text-blue-800">
+                    <strong>Demo Mode:</strong> Using testnet (Base Sepolia) - No real money required!
+                </p>
+            </div>
+            
+            <!-- Wallet Connection -->
+            <div class="mt-6">
+                <button id="connect-wallet" class="btn btn-primary">
+                    🦊 Connect MetaMask
+                </button>
+                <div id="wallet-status" class="mt-2 text-sm"></div>
+            </div>
+        </header>
+
+        <!-- Service Cards -->
+        <div class="grid md:grid-cols-3 gap-6">
+            <!-- Text Generation Service -->
+            <div class="service-card bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-semibold mb-2">💭 Text Generation</h2>
+                <div class="price-tag">$0.01 per request</div>
+                <p class="text-gray-600 mb-4">Generate creative text using DistilGPT-2</p>
+                
+                <div class="form-group">
+                    <label class="block text-sm font-medium mb-2">Prompt:</label>
+                    <input 
+                        type="text" 
+                        id="text-prompt" 
+                        placeholder="Once upon a time..."
+                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                        value="The future of AI is"
+                    >
+                    <button 
+                        id="text-btn" 
+                        class="btn btn-primary mt-3 w-full"
+                    >
+                        Generate Text
+                    </button>
+                </div>
+                <div id="text-result" class="result-box mt-4"></div>
+            </div>
+
+            <!-- Sentiment Analysis Service -->
+            <div class="service-card bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-semibold mb-2"> Sentiment Analysis</h2>
+                <div class="price-tag">$0.005 per request</div>
+                <p class="text-gray-600 mb-4">Analyze text sentiment using RoBERTa</p>
+                
+                <div class="form-group">
+                    <label class="block text-sm font-medium mb-2">Text to analyze:</label>
+                    <textarea 
+                        id="sentiment-text" 
+                        placeholder="I love this new technology!"
+                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                        rows="3"
+                    >I love using AI for creative projects!</textarea>
+                    <button 
+                        id="sentiment-btn" 
+                        class="btn btn-primary mt-3 w-full"
+                    >
+                        Analyze Sentiment
+                    </button>
+                </div>
+                <div id="sentiment-result" class="result-box mt-4"></div>
+            </div>
+
+            <!-- Image Generation Service -->
+            <div class="service-card bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-semibold mb-2">🖼️ Image Generation</h2>
+                <div class="price-tag">$0.02 per request</div>
+                <p class="text-gray-600 mb-4">Generate images using Amazon Nova Canvas</p>
+                
+                <div class="form-group">
+                    <label class="block text-sm font-medium mb-2">Prompt:</label>
+                    <input 
+                        type="text" 
+                        id="image-prompt" 
+                        placeholder="A futuristic city skyline at sunset..."
+                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                        value="A beautiful mountain landscape with a lake"
+                    >
+                    <button 
+                        id="image-btn" 
+                        class="btn btn-primary mt-3 w-full"
+                    >
+                        Generate Image
+                    </button>
+                </div>
+                <div id="image-result" class="result-box mt-4"></div>
+            </div>
+        </div>
+
+        <!-- How it Works -->
+        <div class="mt-12 bg-white rounded-lg shadow-md p-6">
+            <h3 class="text-xl font-semibold mb-4">🔧 How it Works</h3>
+            <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                <li>Click a service button to make a request</li>
+                <li>FastAPI returns <code class="bg-gray-100 px-1 rounded">402 Payment Required</code> with payment details</li>
+                <li>Your x402-compatible client (like MetaMask) signs the payment</li>
+                <li>FastAPI verifies the payment with the facilitator</li>
+                <li>AI service processes your request and returns results</li>
+            </ol>
+            <div class="mt-4 p-3 bg-yellow-50 rounded-lg">
+                <p class="text-sm text-yellow-800">
+                    <strong>Note:</strong> This demo requires an x402-compatible client. 
+                    Try the <a href="/debug" class="text-blue-600 underline">debug endpoint</a> to check configuration.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        import * as viem from 'https://esm.sh/[email protected]';
+        
+        // Global wallet state
+        let walletClient = null;
+        let currentAccount = null;
+        
+        // Initialize wallet connection on page load
+        document.addEventListener('DOMContentLoaded', initWallet);
+        
+        async function initWallet() {
+            const connectBtn = document.getElementById('connect-wallet');
+            const statusDiv = document.getElementById('wallet-status');
+            
+            if (typeof window.ethereum === 'undefined') {
+                statusDiv.innerHTML = '<span class="text-red-600">❌ MetaMask not installed</span>';
+                connectBtn.disabled = true;
+                connectBtn.textContent = 'Install MetaMask';
+                connectBtn.onclick = () => window.open('https://metamask.io/', '_blank');
+                return;
+            }
+            
+            // Check if already connected
+            try {
+                const accounts = await window.ethereum.request({ method: 'eth_accounts' });
+                if (accounts.length > 0) {
+                    await connectWallet();
+                }
+            } catch (error) {
+                console.log('No existing connection');
+            }
+            
+            connectBtn.onclick = connectWallet;
+        }
+        
+        async function connectWallet() {
+            const connectBtn = document.getElementById('connect-wallet');
+            const statusDiv = document.getElementById('wallet-status');
+            
+            try {
+                // Request account access
+                await window.ethereum.request({ method: 'eth_requestAccounts' });
+                
+                // Switch to Base Sepolia if not already on it
+                try {
+                    await window.ethereum.request({
+                        method: 'wallet_switchEthereumChain',
+                        params: [{ chainId: '0x14a34' }], // Base Sepolia chainId in hex
+                    });
+                } catch (switchError) {
+                    // Chain not added, try to add it
+                    if (switchError.code === 4902) {
+                        await window.ethereum.request({
+                            method: 'wallet_addEthereumChain',
+                            params: [{
+                                chainId: '0x14a34',
+                                chainName: 'Base Sepolia',
+                                nativeCurrency: {
+                                    name: 'ETH',
+                                    symbol: 'ETH',
+                                    decimals: 18,
+                                },
+                                rpcUrls: ['https://sepolia.base.org'],
+                                blockExplorerUrls: ['https://sepolia-explorer.base.org'],
+                            }],
+                        });
+                    } else {
+                        throw switchError;
+                    }
+                }
+                
+                // Create wallet client with viem
+                walletClient = viem.createWalletClient({
+                    transport: viem.custom(window.ethereum),
+                    chain: viem.baseSepolia, // Base Sepolia testnet
+                });
+                
+                // Get account
+                const [address] = await walletClient.getAddresses();
+                currentAccount = address;
+                
+                // Update UI
+                connectBtn.textContent = `✅ ${currentAccount.slice(0, 6)}...${currentAccount.slice(-4)}`;
+                connectBtn.disabled = true;
+                statusDiv.innerHTML = '<span class="text-green-600">🎉 Wallet connected to Base Sepolia! Ready to make payments.</span>';
+                
+                console.log('✅ Wallet connected:', currentAccount);
+                
+            } catch (error) {
+                console.error('❌ Failed to connect wallet:', error);
+                let errorMessage = 'Connection failed';
+                if (error.code === 4001) {
+                    errorMessage = 'User rejected connection';
+                } else if (error.code === -32002) {
+                    errorMessage = 'Connection request pending';
+                }
+                statusDiv.innerHTML = `<span class="text-red-600">❌ ${errorMessage}</span>`;
+            }
+        }
+        
+        // Create x402 payment signature using TransferWithAuthorization EIP-712 (matches facilitator exactly)
+        async function createPaymentSignature(paymentRequirements) {
+            if (!walletClient || !currentAccount) {
+                throw new Error('Wallet not connected');
+            }
+            
+            console.log('🔧 Creating payment signature...');
+            
+            // Wait a bit to ensure wallet is fully ready (helps with race conditions)
+            await new Promise(resolve => setTimeout(resolve, 100));
+            
+            // Double-check wallet state
+            try {
+                const accounts = await walletClient.getAddresses();
+                if (!accounts || accounts.length === 0) {
+                    throw new Error('No accounts available');
+                }
+                currentAccount = accounts[0]; // Refresh current account
+                console.log('📝 Wallet verification - current account:', currentAccount);
+            } catch (error) {
+                console.error('❌ Wallet verification failed:', error);
+                throw new Error('Wallet not ready for signing');
+            }
+            
+            // Generate nonce and deadline - ensuring proper format to avoid BigInt issues
+            const currentTime = Math.floor(Date.now() / 1000);
+            const validAfter = currentTime - 60; // Valid 1 minute ago (account for clock skew)
+            const validBefore = currentTime + paymentRequirements.maxTimeoutSeconds; // Valid until timeout
+            
+            // Create a proper 32-byte nonce (64 hex chars) that won't cause BigInt issues
+            const randomBytes = new Uint8Array(32);
+            crypto.getRandomValues(randomBytes);
+            const nonce = '0x' + Array.from(randomBytes, byte => byte.toString(16).padStart(2, '0')).join('');
+            
+            console.log('📝 Generated nonce:', nonce, 'length:', nonce.length);
+            
+            // EIP-712 domain for TransferWithAuthorization (matches facilitator exactly)
+            const domain = {
+                name: paymentRequirements.extra?.name || 'USDC',
+                version: paymentRequirements.extra?.version || '2',
+                chainId: 84532, // Base Sepolia
+                verifyingContract: paymentRequirements.asset,
+            };
+            
+            // EIP-712 types for TransferWithAuthorization (matches facilitator)
+            const types = {
+                TransferWithAuthorization: [
+                    { name: 'from', type: 'address' },
+                    { name: 'to', type: 'address' },
+                    { name: 'value', type: 'uint256' },
+                    { name: 'validAfter', type: 'uint256' },
+                    { name: 'validBefore', type: 'uint256' },
+                    { name: 'nonce', type: 'bytes32' },
+                ],
+            };
+            
+            // Create the authorization message (ensure all values are strings, no BigInt)
+            const message = {
+                from: String(currentAccount),
+                to: String(paymentRequirements.payTo),
+                value: String(paymentRequirements.maxAmountRequired), // Ensure string
+                validAfter: String(validAfter),
+                validBefore: String(validBefore),
+                nonce: String(nonce),
+            };
+            
+            console.log('📝 Signing TransferWithAuthorization message:', message);
+            console.log('📝 Domain:', domain);
+            console.log('📝 Message types:', typeof message.value, typeof message.validAfter, typeof message.validBefore);
+            
+            // Sign the EIP-712 TransferWithAuthorization message
+            const signature = await walletClient.signTypedData({
+                account: currentAccount,
+                domain,
+                types,
+                primaryType: 'TransferWithAuthorization',
+                message,
+            });
+            
+            // Create payment payload (ensure all values are strings to avoid BigInt issues)
+            const paymentPayload = {
+                x402Version: 1,
+                scheme: 'exact',
+                network: 'base-sepolia',
+                payload: {
+                    signature: String(signature),
+                    authorization: {
+                        from: String(currentAccount),
+                        to: String(paymentRequirements.payTo),
+                        value: String(paymentRequirements.maxAmountRequired),
+                        validAfter: String(validAfter),
+                        validBefore: String(validBefore),
+                        nonce: String(nonce),
+                    },
+                },
+            };
+            
+            console.log('📝 PaymentPayload before JSON.stringify:', paymentPayload);
+            console.log('📝 Authorization value type:', typeof paymentPayload.payload.authorization.value);
+            
+            // Encode as base64 for X-Payment header (handle any BigInt values)
+            let paymentJson;
+            try {
+                paymentJson = JSON.stringify(paymentPayload, (key, value) => {
+                    // Log any BigInt values we encounter
+                    if (typeof value === 'bigint') {
+                        console.warn('⚠️ Found BigInt in paymentPayload:', key, value);
+                        return value.toString();
+                    }
+                    return value;
+                });
+            } catch (error) {
+                console.error('❌ JSON.stringify error:', error);
+                console.error('❌ PaymentPayload causing error:', paymentPayload);
+                throw new Error(`Failed to serialize payment: ${error.message}`);
+            }
+            const paymentHeader = btoa(paymentJson);
+            
+            console.log('✅ TransferWithAuthorization signature created');
+            
+            // Debug: decode and check the payment header for any issues
+            try {
+                const decodedPayload = JSON.parse(atob(paymentHeader));
+                console.log('📝 Decoded payment payload:', decodedPayload);
+                
+                // Check timing - this might be the issue
+                const now = Math.floor(Date.now() / 1000);
+                const validAfter = Number(decodedPayload.payload.authorization.validAfter);
+                const validBefore = Number(decodedPayload.payload.authorization.validBefore);
+                
+                console.log('📝 Current time:', now);
+                console.log('📝 ValidAfter:', validAfter, '(diff:', now - validAfter, 'seconds)');
+                console.log('📝 ValidBefore:', validBefore, '(diff:', validBefore - now, 'seconds)');
+                
+                // Check timing issues
+                if (now < validAfter) {
+                    console.warn('⚠️ Payment not valid yet! Current time is before validAfter');
+                }
+                if (now >= validBefore) {
+                    console.warn('⚠️ Payment expired! Current time is after validBefore');
+                }
+                
+                // Check authorization structure
+                const auth = decodedPayload.payload.authorization;
+                console.log('📝 Authorization:', {
+                    from: auth.from,
+                    to: auth.to,
+                    value: auth.value,
+                    nonce: auth.nonce
+                });
+                
+            } catch (error) {
+                console.error('❌ Failed to decode payment header:', error);
+            }
+            
+            return paymentHeader;
+        }
+        
+        // Display API results
+        function displayResult(endpoint, result, resultDiv) {
+            if (endpoint.includes('text')) {
+                resultDiv.innerHTML = `
+                    <div class="success-result">
+                        <h4 class="font-semibold text-green-600 mb-2">Generated Text</h4>
+                        <p class="text-gray-800 italic">"${result.result}"</p>
+                        <small class="text-gray-500">Model: ${result.model}</small>
+                    </div>
+                `;
+            } else if (endpoint.includes('sentiment')) {
+                const sentiment = result.sentiment.toUpperCase();
+                const sentimentEmoji = sentiment === 'POSITIVE' ? '👍' : 
+                                     sentiment === 'NEGATIVE' ? '👎' : '😐';
+                                     
+
+                resultDiv.innerHTML = `
+                    <div class="success-result">
+                        <h4 class="font-semibold text-green-600 mb-2"> Sentiment Analysis</h4>
+                        <div class="sentiment-result">
+                            <p class="text-lg">${sentimentEmoji} <strong>${sentiment}</strong></p>
+                            <p class="text-sm text-gray-600">Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
+                            <small class="text-gray-500">Model: ${result.model}</small>
+                        </div>
+                    </div>
+                `;
+            } else if (endpoint.includes('image')) {
+                resultDiv.innerHTML = `
+                    <div class="success-result">
+                        <h4 class="font-semibold text-green-600 mb-2">🖼️ Generated Image</h4>
+                        <div class="image-result text-center">
+                            <img src="data:image/png;base64,${result.image}" 
+                                 alt="${result.prompt}" 
+                                 class="w-full max-w-sm mx-auto rounded-lg shadow-md mb-2">
+                            <p class="text-sm text-gray-600 italic">"${result.prompt}"</p>
+                            <small class="text-gray-500">Model: ${result.model}</small>
+                        </div>
+                    </div>
+                `;
+            }
+        }
+        
+        // Enhanced API call handler with proper x402 support
+        async function callApi(endpoint, data, buttonId, resultId) {
+            const button = document.getElementById(buttonId);
+            const resultDiv = document.getElementById(resultId);
+
+            button.disabled = true;
+            button.textContent = 'Processing...';
+            resultDiv.innerHTML = '<div class="loading">🔄 Loading...</div>';
+
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(data, (key, value) => {
+                        // Handle BigInt values
+                        if (typeof value === 'bigint') {
+                            return value.toString();
+                        }
+                        return value;
+                    })
+                });
+
+                // Handle 402 Payment Required - Create payment and retry
+                if (response.status === 402) {
+                    const paymentInfo = await response.json();
+                    
+                    if (!walletClient) {
+                        resultDiv.innerHTML = `
+                            <div class="payment-required">
+                                <h4 class="text-lg font-semibold text-orange-600 mb-2">💳 Payment Required</h4>
+                                <p class="text-sm text-gray-600 mb-2">Please connect your MetaMask wallet first.</p>
+                                <div class="mt-3 p-3 bg-gray-50 rounded text-xs">
+                                    <p class="font-semibold mb-2">402 Response Details:</p>
+                                    <pre class="text-gray-700 overflow-x-auto">${JSON.stringify(paymentInfo, null, 2)}</pre>
+                                </div>
+                                <button onclick="connectWallet()" class="btn btn-primary text-sm mt-3">Connect Wallet</button>
+                            </div>
+                        `;
+                        return;
+                    }
+                    
+                    try {
+                        resultDiv.innerHTML = '<div class="loading">💳 Creating payment signature...</div>';
+                        
+                        // Extract payment requirements from the first accept option
+                        const paymentRequirements = paymentInfo.accepts[0];
+                        
+                        // Create payment signature with retry logic for BigInt issues
+                        let paymentHeader;
+                        let attempts = 0;
+                        const maxAttempts = 2;
+                        
+                        while (attempts < maxAttempts) {
+                            try {
+                                paymentHeader = await createPaymentSignature(paymentRequirements);
+                                break; // Success, exit retry loop
+                            } catch (error) {
+                                attempts++;
+                                console.warn(`⚠️ Payment signature attempt ${attempts} failed:`, error.message);
+                                
+                                if (error.message.includes('loop of type') || error.message.includes('bigint')) {
+                                    if (attempts < maxAttempts) {
+                                        console.log('🔄 Retrying payment signature creation...');
+                                        await new Promise(resolve => setTimeout(resolve, 500)); // Wait before retry
+                                        continue;
+                                    }
+                                }
+                                throw error; // Re-throw if not a BigInt error or max attempts reached
+                            }
+                        }
+                        
+                        // Ensure we have a valid payment header before proceeding
+                        if (!paymentHeader) {
+                            throw new Error('Failed to create payment signature');
+                        }
+                        
+                        resultDiv.innerHTML = '<div class="loading">🔄 Processing payment...</div>';
+                        
+                        console.log('💳 Sending payment request to:', endpoint);
+                        console.log('💳 Payment header defined:', paymentHeader !== undefined);
+                        console.log('💳 Payment header length:', paymentHeader?.length);
+                        console.log('💳 Payment header preview:', paymentHeader?.substring(0, 100) + '...');
+                        
+                        // Verify headers before sending
+                        const requestHeaders = { 
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json',
+                            'X-Payment': paymentHeader
+                        };
+                        console.log('💳 Request headers:', requestHeaders);
+                        
+                        // Retry the request with payment header
+                        const paidResponse = await fetch(endpoint, {
+                            method: 'POST',
+                            headers: requestHeaders,
+                            body: JSON.stringify(data, (key, value) => {
+                                // Handle BigInt values
+                                if (typeof value === 'bigint') {
+                                    console.warn('⚠️ Found BigInt in request body:', key, value);
+                                    return value.toString();
+                                }
+                                return value;
+                            })
+                        });
+                        
+                        console.log('💳 Payment response status:', paidResponse.status);
+                        console.log('💳 Payment response headers:', Object.fromEntries(paidResponse.headers.entries()));
+                        
+                        if (!paidResponse.ok) {
+                            const errorText = await paidResponse.text();
+                            console.error('❌ Payment failed - response body:', errorText);
+                            
+                            // If it's a 402, try to parse and show the specific validation error
+                            if (paidResponse.status === 402) {
+                                try {
+                                    const errorObj = JSON.parse(errorText);
+                                    console.error('❌ 402 Payment verification failed:', errorObj);
+                                    console.error('❌ Error message:', errorObj.error);
+                                    
+                                    // Log the payment details for comparison
+                                    const sentPayload = JSON.parse(atob(paymentHeader));
+                                    console.error('❌ Sent payload:', sentPayload);
+                                    console.error('❌ Expected requirements:', errorObj.accepts?.[0]);
+                                    
+                                    // Check for specific error patterns
+                                    if (errorObj.error) {
+                                        if (errorObj.error.includes('signature')) {
+                                            console.error('🔍 SIGNATURE VERIFICATION FAILED');
+                                        } else if (errorObj.error.includes('nonce')) {
+                                            console.error('🔍 NONCE ISSUE');
+                                        } else if (errorObj.error.includes('timing') || errorObj.error.includes('valid')) {
+                                            console.error('🔍 TIMING ISSUE');
+                                        } else if (errorObj.error.includes('funds')) {
+                                            console.error('🔍 INSUFFICIENT FUNDS');
+                                        } else {
+                                            console.error('🔍 OTHER VALIDATION ERROR:', errorObj.error);
+                                        }
+                                    }
+                                } catch (parseError) {
+                                    console.error('❌ Could not parse error response:', parseError);
+                                }
+                            }
+                            
+                            let error;
+                            try {
+                                error = JSON.parse(errorText);
+                            } catch {
+                                error = { error: errorText };
+                            }
+                            
+                            throw new Error(error.detail || error.error || `Payment failed (${paidResponse.status})`);
+                        }
+                        
+                        // Payment successful, process the result
+                        const result = await paidResponse.json();
+                        displayResult(endpoint, result, resultDiv);
+                        return;
+                        
+                    } catch (paymentError) {
+                        resultDiv.innerHTML = `
+                            <div class="error-result">
+                                <h4 class="font-semibold text-red-600 mb-2">💳 Payment Failed</h4>
+                                <p class="text-red-700">${paymentError.message}</p>
+                                <p class="text-sm text-gray-600 mt-2">Make sure you have testnet USDC on Base Sepolia.</p>
+                            </div>
+                        `;
+                        return;
+                    }
+                }
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || error.error || 'Request failed');
+                }
+
+                const result = await response.json();
+                displayResult(endpoint, result, resultDiv);
+
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="error-result">
+                        <h4 class="font-semibold text-red-600 mb-2">❌ Error</h4>
+                        <p class="text-red-700">${error.message}</p>
+                    </div>
+                `;
+            } finally {
+                button.disabled = false;
+                if (button.id.includes('text')) {
+                    button.textContent = 'Generate Text';
+                } else if (button.id.includes('sentiment')) {
+                    button.textContent = 'Analyze Sentiment';
+                } else if (button.id.includes('image')) {
+                    button.textContent = 'Generate Image';
+                }
+            }
+        }
+
+        // Event listeners
+        document.getElementById('text-btn').addEventListener('click', () => {
+            const prompt = document.getElementById('text-prompt').value.trim();
+            if (!prompt) {
+                alert('Please enter a prompt!');
+                return;
+            }
+            callApi('/generate-text', { prompt }, 'text-btn', 'text-result');
+        });
+
+        document.getElementById('sentiment-btn').addEventListener('click', () => {
+            const text = document.getElementById('sentiment-text').value.trim();
+            if (!text) {
+                alert('Please enter text to analyze!');
+                return;
+            }
+            callApi('/analyze-sentiment', { text }, 'sentiment-btn', 'sentiment-result');
+        });
+
+        document.getElementById('image-btn').addEventListener('click', () => {
+            const prompt = document.getElementById('image-prompt').value.trim();
+            if (!prompt) {
+                alert('Please enter an image prompt!');
+                return;
+            }
+            callApi('/generate-image', { prompt }, 'image-btn', 'image-result');
+        });
+
+        // Allow Enter key to submit
+        document.getElementById('text-prompt').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') document.getElementById('text-btn').click();
+        });
+
+        document.getElementById('image-prompt').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') document.getElementById('image-btn').click();
+        });
+    </script>
+</body>
+</html>