🏗️ Arquitectura - ¿Quién quiere ser Millonario?
graph TD
classDef gold fill:#FFD700,stroke:#FF8C00,stroke-width:2px,color:#1a0533;
classDef cloudflare fill:#f38020,stroke:#fff,stroke-width:2px,color:#fff;
classDef db fill:#1a0533,stroke:#FFD700,stroke-width:2px,color:#FFD700;
User["👤 Jugador"] -->|HTTPS + Turnstile| CF["☁️ Cloudflare Network"]
CF -->|Routing| Worker["⚙️ Worker millonario
Hono.js"]
subgraph "¿Quién quiere ser Millonario? App"
Worker -->|Static Assets| Assets["📂 HTML/CSS
Imágenes"]
Worker -->|SQL Query| D1["🛢️ D1 Database
Preguntas Quiz"]
Worker -->|Validación| TS["🛡️ Turnstile
Bot Protection"]
Worker -->|1· embedding de la pregunta| EMB["🔢 bge-m3
multilingüe ES/EN/CA"]
EMB -->|vector 1024d| VEC["🧭 Vectorize
millonario-knowledge
48 fragmentos"]
VEC -->|2· top-4 filtrado por idioma| Worker
Worker -.->|respaldo si Vectorize falla| KV["🗄️ KV Store
fallback"]
Worker -->|3a· caché ON| GW["🔀 AI Gateway
millonario-gw · caché 300s
respuesta entera"]
GW -->|inferencia| AI["🧠 Workers AI
modelo seleccionable"]
Worker -->|3b· caché OFF: directo| AI
AI -->|SSE token a token| Worker
end
CF -->|snippets embebidos| AS["🔎 AI Search gestionado
instancia millonario"]
AS -->|indexa solo| R2["🪣 R2
millonario-knowledge-docs
48 documentos"]
class User gold;
class CF,Worker,AI,GW,EMB,AS cloudflare;
class D1,KV,VEC,R2 db;
class TS gold;
Qué mirar en la demo
- Recuperación real. La pregunta se convierte en vector con bge-m3 y se compara con 48 fragmentos en Vectorize, filtrados por idioma. La barra de métricas indica cuántos fragmentos alimentaron la respuesta.
- Streaming. Los tokens se pintan según llegan por SSE, así se ve el tiempo hasta el primer token, no solo el total.
- Caché contra streaming. Los dos tiran en direcciones opuestas, y el interruptor del chat lo enseña. Con caché: la llamada pasa por el AI Gateway, que necesita acumular la respuesta entera para guardarla, así que no hay streaming — pero repite la pregunta y la segunda respuesta vuelve en decenas de milisegundos en vez de segundos. Sin caché: el Worker llama al modelo directamente y el primer token llega sobre los 700 ms.
- Cambio de modelo. El selector cambia el modelo en caliente entre cuatro proveedores. El servidor lo valida contra una lista blanca.
- RAG a mano contra producto gestionado. Dos asistentes conviven a propósito. El de la izquierda del juego es el nuestro: hemos escrito el código de embeddings, recuperación y prompt. El de la derecha es Cloudflare AI Search, que indexa un bucket R2 por su cuenta y sirve chat y búsqueda sin código de recuperación nuestro. Mismo corpus, misma pregunta: compara las respuestas y el esfuerzo que ha costado cada una.
← Atrás