Back to Architecture

Token for Granted

Interactive architecture diagrams showing how a full-stack AI application runs entirely on Cloudflare's edge — Workers, D1, KV, AI Gateway, and Workers AI — for under $10/month.

graph TB
  subgraph Client["Browser"]
    UI["React 19 + Framer Motion"]
  end

  subgraph CF["Cloudflare Edge"]
    Worker["Cloudflare Worker<br/>TanStack Start SSR"]

    subgraph Storage["Storage Layer"]
      D1["D1 Database<br/>SQLite"]
      KV["KV Namespace<br/>Cache Store"]
    end

    subgraph AI["AI Layer"]
      GW["AI Gateway<br/>Dynamic Routing<br/>$10/mo Budget Cap"]
      WAI["Workers AI"]
    end
  end

  UI -->|"HTTPS"| Worker
  Worker -->|"SQL Queries"| D1
  Worker -->|"Cache Read/Write<br/>SHA-256 Keys"| KV
  Worker -->|"OpenAI-compat<br/>Endpoint"| GW
  GW -->|"Primary:<br/>Llama 3.1 8B"| WAI
  GW -->|"Fallback:<br/>Mistral 7B"| WAI
  Worker -->|"Image Gen:<br/>Flux-1-Schnell"| WAI
  Worker -->|"Deterministic<br/>Fallback"| Worker

  style CF fill:#1a1a2e,stroke:#0f3460,color:#e94560
  style Storage fill:#16213e,stroke:#0f3460,color:#e94560
  style AI fill:#16213e,stroke:#0f3460,color:#e94560
  style Client fill:#0f3460,stroke:#e94560,color:#e94560
graph TD
  Submit["User Submits Asset"] --> Validate["Zod Schema Validation"]
  Validate --> Hash["SHA-256 Cache Key<br/>Web Crypto API"]
  Hash --> CacheCheck{"KV Cache<br/>Lookup"}

  CacheCheck -->|"HIT < 1hr"| Cached["Return Cached Response"]
  CacheCheck -->|"MISS"| Gateway["AI Gateway"]

  Gateway --> Route{"Model<br/>Available?"}
  Route -->|"Primary"| Llama["Llama 3.1 8B"]
  Route -->|"Fallback"| Mistral["Mistral 7B"]

  Gateway -.->|"Failure / Budget"| Deterministic["Deterministic Fallback<br/>Hash-Based Pricing"]

  Llama --> CacheWrite["Cache in KV<br/>TTL: 3600s"]
  Mistral --> CacheWrite
  CacheWrite --> Parse["Parse + Validate"]
  Deterministic --> Parse

  Parse --> Tokens["Token Pricing Engine<br/>19 Providers"]
  Tokens --> ImageCheck{"Image<br/>Needed?"}
  ImageCheck -->|"Yes"| ImgCache{"Image in<br/>KV Cache?"}
  ImgCache -->|"HIT < 24hr"| UseImg["Use Cached Image"]
  ImgCache -->|"MISS"| GenImg["Flux-1-Schnell<br/>Generate Image"]
  GenImg --> ImgStore["Cache Image<br/>TTL: 86400s"]
  ImageCheck -->|"No"| Persist
  UseImg --> Persist["Write to D1"]
  ImgStore --> Persist
  Persist --> Response["Full Valuation Response"]
  Cached --> Response

  style Submit fill:#e94560,stroke:#0f3460,color:#fff
  style Cached fill:#064e3b,stroke:#34d399,color:#d1fae5
  style Deterministic fill:#451a03,stroke:#fbbf24,color:#fef3c7
  style Response fill:#064e3b,stroke:#34d399,color:#d1fae5
graph TD
  Worker["Worker<br/>OpenAI SDK"] -->|"OpenAI-compat"| Gateway["AI Gateway"]

  Gateway --> Routing["Dynamic Routing"]
  Routing --> Primary["Primary: Llama 3.1 8B<br/>@cf/meta/llama-3.1-8b-instruct-fast"]
  Routing --> Fallback["Fallback: Mistral 7B<br/>@cf/mistral/mistral-7b-instruct-v0.2"]

  Gateway --> Budget["Budget Cap<br/>$10/month Hard Ceiling"]
  Gateway --> Cache["Response Caching<br/>90% Latency Reduction"]
  Gateway --> Observe["Observability<br/>Model · Latency · Tokens · Cost"]

  Budget -.->|"Exhausted"| DeterFallback["Deterministic Fallback"]

  Worker -->|"Direct Binding"| Flux["Flux-1-Schnell<br/>Image Generation"]

  style Worker fill:#1a1a2e,stroke:#0f3460,color:#e94560
  style Gateway fill:#451a03,stroke:#fbbf24,color:#fef3c7
  style Primary fill:#312e81,stroke:#818cf8,color:#e0e7ff
  style Fallback fill:#312e81,stroke:#818cf8,color:#e0e7ff
  style Flux fill:#312e81,stroke:#818cf8,color:#e0e7ff
  style DeterFallback fill:#064e3b,stroke:#34d399,color:#d1fae5
  style Budget fill:#4c0519,stroke:#fb7185,color:#ffe4e6
graph TD
  Input["Input: description + category"] --> SHA["SHA-256 Hash<br/>crypto.subtle.digest"]
  SHA --> Key["Cache Key:<br/>valuation:hex"]

  Key --> TextCache{"Text Cache<br/>TTL: 1 hour"}
  TextCache -->|"HIT"| Fast["< 5ms Response"]
  TextCache -->|"MISS"| AICall["AI Inference"]
  AICall --> Store["Store in KV"]

  Key --> ImgCache{"Image Cache<br/>TTL: 24 hours"}
  ImgCache -->|"HIT"| FastImg["Cached Image"]
  ImgCache -->|"MISS"| GenImg["Flux-1-Schnell"]
  GenImg --> StoreImg["Store in KV"]

  SHA -.-> DetSeed["Deterministic Seed"]
  DetSeed -.-> DetPrice["Hash-Based Pricing<br/>No Cache Needed"]

  style Input fill:#0c4a6e,stroke:#38bdf8,color:#e0f2fe
  style SHA fill:#1e293b,stroke:#94a3b8,color:#cbd5e1
  style Fast fill:#064e3b,stroke:#34d399,color:#d1fae5
  style FastImg fill:#064e3b,stroke:#34d399,color:#d1fae5
  style DetPrice fill:#451a03,stroke:#fbbf24,color:#fef3c7
graph TD
  Request["Valuation Request"] --> AI{"AI Available?"}

  AI -->|"Yes"| AIResponse["AI-Generated<br/>Valuation"]
  AI -->|"No: Budget Exhausted<br/>Gateway Down<br/>Model Error"| HashSeed["SHA-256 Hash<br/>as Seed"]

  HashSeed --> Price["Derive Price<br/>Category-appropriate range"]
  HashSeed --> Tier["Derive Tier<br/>S / A / B / C / D"]
  HashSeed --> Confidence["Derive Confidence<br/>low / medium / high"]
  HashSeed --> Tokens["Token Conversions<br/>19 Providers"]

  Price --> Consistent["Consistent Output<br/>Same input = Same result"]
  Tier --> Consistent
  Confidence --> Consistent
  Tokens --> Consistent

  Consistent --> Marked["Marked as<br/>Deterministic Estimate"]
  AIResponse --> Marked2["Marked as<br/>AI-Generated"]

  style Request fill:#0c4a6e,stroke:#38bdf8,color:#e0f2fe
  style AIResponse fill:#312e81,stroke:#818cf8,color:#e0e7ff
  style HashSeed fill:#451a03,stroke:#fbbf24,color:#fef3c7
  style Consistent fill:#064e3b,stroke:#34d399,color:#d1fae5
  style Marked fill:#064e3b,stroke:#6ee7b7,color:#d1fae5
  style Marked2 fill:#312e81,stroke:#a78bfa,color:#ede9fe
graph LR
  subgraph D1["D1 Database — valuations table"]
    Core["id · description<br/>category · item_name"]
    Pricing["item_price<br/>price_confidence · tier"]
    JSON["token_conversions (JSON)<br/>what_you_could_do (JSON)"]
    AI["analysis · image_url<br/>ai_raw_response"]
    Meta["auth_status<br/>created_at · updated_at"]
  end

  Core --> Pricing
  Pricing --> JSON
  JSON --> AI
  AI --> Meta

  style D1 fill:#1a1a2e,stroke:#0f3460,color:#e94560
  style Core fill:#16213e,stroke:#38bdf8,color:#e0f2fe
  style Pricing fill:#16213e,stroke:#38bdf8,color:#e0f2fe
  style JSON fill:#16213e,stroke:#818cf8,color:#e0e7ff
  style AI fill:#16213e,stroke:#fbbf24,color:#fef3c7
  style Meta fill:#16213e,stroke:#94a3b8,color:#cbd5e1
graph LR
  subgraph Free["Free Tier"]
    Workers["Workers<br/>100K req/day"]
    D1Free["D1<br/>5M reads/day"]
    KVFree["KV<br/>100K reads/day"]
    GWFree["AI Gateway<br/>Free proxy"]
  end

  subgraph Paid["~$0-5/month"]
    WAI["Workers AI<br/>Inference"]
  end

  subgraph Safety["Safety Net"]
    Cap["AI Gateway<br/>$10/mo Hard Cap"]
    Fallback["Deterministic<br/>Fallback"]
  end

  Cap -->|"Budget Exhausted"| Fallback
  WAI --> Cap

  style Free fill:#064e3b,stroke:#34d399,color:#d1fae5
  style Paid fill:#451a03,stroke:#fbbf24,color:#fef3c7
  style Safety fill:#4c0519,stroke:#fb7185,color:#ffe4e6
  style Fallback fill:#064e3b,stroke:#6ee7b7,color:#d1fae5

Try It

Submit any asset and see the AI valuation in action.