Spaces:

hamel88
/

x402-fast-payout-demo

Runtime error

App Files Files Community

hamel88 commited on Jun 26

Commit

191a27f

verified ·

1 Parent(s): f3b9eef

Upload 3 files

Browse files

Files changed (3) hide show

app.py +2 -2
static/style.css +14 -0
templates/index.html +137 -35

app.py CHANGED Viewed

@@ -150,12 +150,12 @@ if CDP_ENABLED:
                     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",

                     split_amount = amount_usdc * (split["pct"] / 100)
                     amount_wei = Web3.toWei(split_amount, "ether")  # Convert to wei
+                    # Transfer to recipient (use same network as x402)
                     tx_hash = await sender.transfer(
                         to=split["wallet"],
                         amount=amount_wei,
                         token="usdc",
+                        network=os.getenv("X402_NETWORK", "base-sepolia")
                     )
                     push("payout",

static/style.css CHANGED Viewed

@@ -8,6 +8,20 @@
     @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;
 }

     @apply bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed;
 }
+.btn-secondary {
+    @apply bg-gray-600 text-white hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed;
+}
+.btn-cool {
+    @apply px-6 py-4 rounded-full font-semibold text-white text-lg;
+    @apply bg-gradient-to-r from-blue-600 to-purple-600;
+    @apply hover:from-blue-700 hover:to-purple-700;
+    @apply transform transition-all duration-200 ease-in-out;
+    @apply hover:scale-105 hover:shadow-lg active:scale-95;
+    @apply shadow-md hover:shadow-xl;
+    @apply disabled:bg-gray-400 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none;
+}
 .price-tag {
     @apply inline-block bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full mb-3;
 }

templates/index.html CHANGED Viewed

@@ -3,50 +3,54 @@
 <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>
@@ -55,8 +59,8 @@
             </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>
@@ -67,10 +71,10 @@
                         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>
@@ -79,23 +83,22 @@
             </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>
@@ -145,6 +148,7 @@
         async function initWallet() {
             const connectBtn = document.getElementById('connect-wallet');
             const statusDiv = document.getElementById('wallet-status');
             // Check if MetaMask is available
@@ -186,6 +190,13 @@
             }
             connectBtn.onclick = connectWallet;
             // Show platform-specific status
             if (isMetaMaskMobile()) {
@@ -197,11 +208,20 @@
         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 {
@@ -237,14 +257,21 @@
                     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);
@@ -260,6 +287,82 @@
             }
         }
         // Create x402 payment signature using TransferWithAuthorization EIP-712 (matches facilitator exactly)
         async function createPaymentSignature(paymentRequirements) {
             if (!walletClient || !currentAccount) {
@@ -498,7 +601,6 @@
                                     <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;

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pay-Per-Inference w/x402+CDP Payouts</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-7xl">
         <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-900 mb-4">🤗 Pay-Per-Inference w/x402+CDP Payouts 🤗</h1>
+            <p class="text-xl text-gray-600">Monetize your models on HF Spaces with 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)
                 </p>
             </div>
             <!-- Wallet Connection -->
             <div class="mt-6">
+                <div class="flex gap-3 justify-center">
+                    <button id="connect-wallet" class="btn btn-primary">
+                        🦊 Connect MetaMask
+                    </button>
+                    <button id="disconnect-wallet" class="btn btn-secondary hidden">
+                        🔌 Disconnect Wallet
+                    </button>
+                </div>
                 <div id="wallet-status" class="mt-2 text-sm"></div>
             </div>
         </header>
         <!-- Service Cards -->
+        <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-8">
             <!-- Text Generation Service -->
+            <div class="service-card bg-white rounded-lg shadow-md p-8">
                 <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>
+                    <textarea
                         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"
+                        rows="3"
+                    >The future of payments and AI is</textarea>
                     <button
                         id="text-btn"
+                        class="mt-3 w-full px-6 py-4 rounded-full font-semibold text-white text-lg bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transform transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-lg active:scale-95 shadow-md hover:shadow-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
                     >
                         Generate Text
                     </button>
             </div>
             <!-- Sentiment Analysis Service -->
+            <div class="service-card bg-white rounded-lg shadow-md p-8">
+                <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>
                         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"
+                    >This Coinbase x402+CDP hackathon has been a lot of fun!!!</textarea>
                     <button
                         id="sentiment-btn"
+                        class="mt-3 w-full px-6 py-4 rounded-full font-semibold text-white text-lg bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transform transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-lg active:scale-95 shadow-md hover:shadow-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
                     >
                         Analyze Sentiment
                     </button>
             </div>
             <!-- Image Generation Service -->
+            <div class="service-card bg-white rounded-lg shadow-md p-8">
                 <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>
+                    <textarea
                         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"
+                        rows="3"
+                    >A happy developer accepting x402 payments on HuggingFace</textarea>
                     <button
                         id="image-btn"
+                        class="mt-3 w-full px-6 py-4 rounded-full font-semibold text-white text-lg bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transform transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-lg active:scale-95 shadow-md hover:shadow-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
                     >
                         Generate Image
                     </button>
         async function initWallet() {
             const connectBtn = document.getElementById('connect-wallet');
+            const disconnectBtn = document.getElementById('disconnect-wallet');
             const statusDiv = document.getElementById('wallet-status');
             // Check if MetaMask is available
             }
             connectBtn.onclick = connectWallet;
+            disconnectBtn.onclick = disconnectWallet;
+            // Listen for account changes in MetaMask
+            if (window.ethereum) {
+                window.ethereum.on('accountsChanged', handleAccountsChanged);
+                window.ethereum.on('chainChanged', handleChainChanged);
+            }
             // Show platform-specific status
             if (isMetaMaskMobile()) {
         async function connectWallet() {
             const connectBtn = document.getElementById('connect-wallet');
+            const disconnectBtn = document.getElementById('disconnect-wallet');
             const statusDiv = document.getElementById('wallet-status');
             try {
+                // Show current status
+                statusDiv.innerHTML = '<span class="text-blue-600">🔄 Connecting to MetaMask...</span>';
+                // Force fresh account access - this will show account selection if multiple accounts
+                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
+                console.log('🔍 Available accounts:', accounts);
+                // Get the currently selected account immediately
+                const currentAccounts = await window.ethereum.request({ method: 'eth_accounts' });
+                console.log('🎯 Current account in MetaMask:', currentAccounts[0]);
                 // Switch to Base Sepolia if not already on it
                 try {
                     chain: viem.baseSepolia, // Base Sepolia testnet
                 });
+                // Get the currently selected account (fresh from MetaMask)
+                const freshAccounts = await window.ethereum.request({ method: 'eth_accounts' });
+                currentAccount = freshAccounts[0]; // Use the currently selected account
+                console.log('🎯 Using account:', currentAccount);
+                // Update UI - show disconnect button, hide connect button
+                connectBtn.classList.add('hidden');
+                disconnectBtn.classList.remove('hidden');
+                disconnectBtn.textContent = `🔌 ${currentAccount.slice(0, 6)}...${currentAccount.slice(-4)}`;
+                statusDiv.innerHTML = `
+                    <div class="text-green-600 text-center">
+                        🎉 Connected: ${currentAccount.slice(0, 8)}...${currentAccount.slice(-6)}<br>
+                        <span class="text-xs text-gray-600">Ready for payments on Base Sepolia</span>
+                    </div>
+                `;
                 console.log('✅ Wallet connected:', currentAccount);
             }
         }
+        async function disconnectWallet() {
+            const connectBtn = document.getElementById('connect-wallet');
+            const disconnectBtn = document.getElementById('disconnect-wallet');
+            const statusDiv = document.getElementById('wallet-status');
+            try {
+                // Try to disconnect from MetaMask (this may not work in all versions)
+                if (window.ethereum && window.ethereum.request) {
+                    await window.ethereum.request({
+                        method: 'wallet_revokePermissions',
+                        params: [{ eth_accounts: {} }]
+                    });
+                }
+            } catch (error) {
+                console.log('Note: MetaMask permission revocation not available:', error.message);
+            }
+            // Reset wallet state
+            walletClient = null;
+            currentAccount = null;
+            // Update UI - show connect button, hide disconnect button
+            connectBtn.classList.remove('hidden');
+            connectBtn.disabled = false;
+            connectBtn.textContent = '🦊 Connect MetaMask';
+            disconnectBtn.classList.add('hidden');
+            statusDiv.innerHTML = `
+                <div class="text-gray-600">
+                    💰 Disconnected.
+                    <span class="text-sm">To switch accounts, change in MetaMask first, then reconnect.</span>
+                </div>
+            `;
+            console.log('🔌 Wallet disconnected (app-level)');
+        }
+        // Handle account changes (when user switches accounts in MetaMask)
+        function handleAccountsChanged(accounts) {
+            console.log('🔄 Accounts changed:', accounts);
+            if (accounts.length === 0) {
+                // No accounts connected - disconnect
+                disconnectWallet();
+            } else if (currentAccount && accounts[0] !== currentAccount) {
+                // Account switched - update UI
+                const disconnectBtn = document.getElementById('disconnect-wallet');
+                const statusDiv = document.getElementById('wallet-status');
+                currentAccount = accounts[0];
+                disconnectBtn.textContent = `🔌 ${currentAccount.slice(0, 6)}...${currentAccount.slice(-4)}`;
+                statusDiv.innerHTML = `<span class="text-blue-600">🔄 Switched to ${currentAccount.slice(0, 6)}...${currentAccount.slice(-4)}</span>`;
+                console.log('✅ Account switched to:', currentAccount);
+                // Update wallet client with new account
+                if (walletClient) {
+                    walletClient = viem.createWalletClient({
+                        transport: viem.custom(window.ethereum),
+                        chain: viem.baseSepolia,
+                    });
+                }
+            }
+        }
+        // Handle chain changes
+        function handleChainChanged(chainId) {
+            console.log('🔗 Chain changed to:', chainId);
+            const statusDiv = document.getElementById('wallet-status');
+            if (chainId === '0x14a34') {
+                statusDiv.innerHTML = '<span class="text-green-600">✅ Connected to Base Sepolia</span>';
+            } else {
+                statusDiv.innerHTML = '<span class="text-orange-600">⚠️ Please switch to Base Sepolia network</span>';
+            }
+        }
         // Create x402 payment signature using TransferWithAuthorization EIP-712 (matches facilitator exactly)
         async function createPaymentSignature(paymentRequirements) {
             if (!walletClient || !currentAccount) {
                                     <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>
                             </div>
                         `;
                         return;