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