Html Frames

{
  "contactSheet": {
    "bytes": 3282,
    "columns": 2,
    "height": 420,
    "pngBase64": "iVBORw0KGgo…",
    "rows": 2,
    "width": 664
  },
  "frameCount": 3,
  "frames": [
    {
      "bytes": 645,
      "pngBase64": "iVBORw0KGgo…",
      "t": 0
    },
    {
      "bytes": 645,
      "pngBase64": "iVBORw0KGgo…",
      "t": 1
    },
    {
      "bytes": 644,
      "pngBase64": "iVBORw0KGgo…",
      "t": 2
    }
  ],
  "height": 180,
  "network": {
    "blockedRequests": 0,
    "policy": "all network access refused; only inline script and style, and data: or blob: URLs the document builds itself"
  },
  "totalBytes": 5216,
  "width": 320
}

# bash or zsh: see the payment challenge. Nothing is charged.
curl -sS -g -i -X POST 'https://agent402.tools/api/html-frames' \
  -H 'content-type: application/json' \
  --data-raw '{"height":180,"html":"<!doctype html><html><body style=\"margin:0\"><canvas id=\"c\" width=\"320\" height=\"180\"><\/canvas><script>const x=document.getElementById('\''c'\'').getContext('\''2d'\'');window.renderAt=function(t){x.fillStyle='\''#10243e'\'';x.fillRect(0,0,320,180);x.fillStyle='\''#4cc38a'\'';x.fillRect(20+t*100,70,40,40);};<\/script><\/body><\/html>","times":[0,1,2],"width":320}'

# x402 v2 sends the challenge base64-encoded in the PAYMENT-REQUIRED header (v1 sends it in the body).
# To read the header:
curl -sS -g -o /dev/null -D - -X POST 'https://agent402.tools/api/html-frames' \
  -H 'content-type: application/json' \
  --data-raw '{"height":180,"html":"<!doctype html><html><body style=\"margin:0\"><canvas id=\"c\" width=\"320\" height=\"180\"><\/canvas><script>const x=document.getElementById('\''c'\'').getContext('\''2d'\'');window.renderAt=function(t){x.fillStyle='\''#10243e'\'';x.fillRect(0,0,320,180);x.fillStyle='\''#4cc38a'\'';x.fillRect(20+t*100,70,40,40);};<\/script><\/body><\/html>","times":[0,1,2],"width":320}' \
  | grep -i '^payment-required:' | cut -d' ' -f2 | tr -d '\r' | base64 --decode

// npm i @x402/fetch @x402/evm viem
import { wrapFetchWithPayment, x402Client } from "@x402/fetch";
import { registerExactEvmScheme } from "@x402/evm/exact/client";
import { privateKeyToAccount } from "viem/accounts";

// Pays at most $0.02 per call.
const client = new x402Client().setSpendControls({ maxAmountPerPayment: "$0.02" });
registerExactEvmScheme(client, { signer: privateKeyToAccount(process.env.EVM_PRIVATE_KEY) });
const pay = wrapFetchWithPayment(fetch, client);

// Not sure it's safe to pay? ToolVet checks it first for $0.005. Pay for that from a separate
// client: this one is capped at $0.02 per payment. GET https://toolvet.app/api/v1/check?url=https%3A%2F%2Fagent402.tools%2Fapi%2Fhtml-frames&method=POST
const res = await pay("https://agent402.tools/api/html-frames", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({
    "height": 180,
    "html": "<!doctype html><html><body style=\"margin:0\"><canvas id=\"c\" width=\"320\" height=\"180\"><\/canvas><script>const x=document.getElementById('c').getContext('2d');window.renderAt=function(t){x.fillStyle='#10243e';x.fillRect(0,0,320,180);x.fillStyle='#4cc38a';x.fillRect(20+t*100,70,40,40);};<\/script><\/body><\/html>",
    "times": [
      0,
      1,
      2
    ],
    "width": 320
  }),
});
console.log(res.status, await res.text());

# pip install "x402[requests,evm]"
import os
from eth_account import Account
from x402 import x402ClientSync
from x402.http.clients import x402_requests
from x402.mechanisms.evm import EthAccountSigner
from x402.mechanisms.evm.exact.register import register_exact_evm_client

# Pays at most $0.02 per call.
client = x402ClientSync().set_spend_controls({"max_amount_per_payment": "$0.02"})
register_exact_evm_client(client, EthAccountSigner(Account.from_key(os.environ["EVM_PRIVATE_KEY"])))

with x402_requests(client) as session:
    res = session.post(
        "https://agent402.tools/api/html-frames",
        json={
            "height": 180,
            "html": "<!doctype html><html><body style=\"margin:0\"><canvas id=\"c\" width=\"320\" height=\"180\"></canvas><script>const x=document.getElementById('c').getContext('2d');window.renderAt=function(t){x.fillStyle='#10243e';x.fillRect(0,0,320,180);x.fillStyle='#4cc38a';x.fillRect(20+t*100,70,40,40);};</script></body></html>",
            "times": [
                0,
                1,
                2,
            ],
            "width": 320,
        },
    )
    print(res.status_code, res.text)