Recommendation
Execution Process
Preview
Knowledge-first flow (this edition)
1. Pick a sample with a ⚡ badge → it renders locally inside a sandboxed iframe (strict CSP: no network, no eval) — instant, free, no API key. Log: ⚡ Knowledge render … (local, no AI).
2. Renderer fails, has no local renderer, is a legacy 🤖 sample, or you typed a custom prompt → automatically falls through to the AI pipeline below.
3. Preview → Download PNG (canvas → PNG) or Download Source (self-contained HTML a teacher can open offline).
AI pipeline (fallback path only)
Format → capability → provider → model → prompt → execute → embedded preview → PNG:
1. Load model/format compatibility seed and prompt catalog.
2. Resolve compatible models using output format + capability flags.
3. Rank models using quality/direct/editable/visual-reference signals.
4. Resolve provider credentials from config.json.
5. Execute selected provider/model.
6. On failure, continue through configured failover order.
7. Normalize response into image, SVG, HTML, Canvas/WebGL, CSS/HTML, or Mermaid artifact.
8. Render artifact inside this page.
9. Export preview as PNG.
Config file
Copy config.example.json to config.json and put your keys there. Do not commit config.json. Browser-side keys are appropriate only for a private/local POC; production should use a backend proxy.
Provider API contracts
OpenRouter image generation uses its dedicated /api/v1/images endpoint; Ollama supports /api/chat and an experimental OpenAI-compatible image generation endpoint; OpenAI is configured around its Responses API for code and Images API for image output. The provider adapter layer isolates these differences.