# richardawe/sketchgpt architecture

> Architecture diagram of the GitHub repository richardawe/sketchgpt, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/richardawe/sketchgpt
- Repository: https://github.com/richardawe/sketchgpt

## Overview

sketchgpt is a browser-based picture-book and drawing app, with an optional Ollama-backed chat page for local development. The main visitor workflow is to enter an idea, have an in-browser model write a story and picture plans, then apply page-side continuity and scene rules to render and download an illustrated book. Sketch mode separately turns a description into a validated SVG. README documents device-aware model selection, offline caching, selfie and sharing capabilities; those branches are included where the tree supports them. Source excerpts are partial, so links between unsampled app modules are limited to documented behavior.

Main entry points: [`web/browser.html`](https://github.com/richardawe/sketchgpt/blob/main/web/browser.html) (Browser app), [`web/book.mjs`](https://github.com/richardawe/sketchgpt/blob/main/web/book.mjs) (Book mode), [`web/sketch.mjs`](https://github.com/richardawe/sketchgpt/blob/main/web/sketch.mjs) (SVG drawing), [`web/index.html`](https://github.com/richardawe/sketchgpt/blob/main/web/index.html) (Ollama chat)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser runtime"]
  node_browser["Browser app<br/>[browser.html]"]
  node_model{{"WebLLM model"}}
  node_serviceworker["Offline worker<br/>[sw.js]"]
end

subgraph group_book["Book and drawing"]
  node_bookmode["Book mode<br/>[book.mjs]"]
  node_scene["Scene planning<br/>[scene.mjs]"]
  node_sketch["SVG drawing<br/>[sketch.mjs]"]
  node_art["Illustration assets<br/>[art.mjs]"]
  node_stamps["Stamp assets<br/>[stamps.mjs]"]
  node_animate["Book animation<br/>[animate.mjs]"]
end

subgraph group_creative["Creative tools"]
  node_selfie["Selfie caricature<br/>[face.mjs]"]
  node_facefind["Face detection<br/>[face-find.mjs]"]
  node_share["Book sharing<br/>[share.mjs]"]
end

subgraph group_local["Local chat"]
  node_ollama["Ollama chat<br/>[index.html]"]
end

node_visitor(("Visitor"))
node_modelcdn["Model CDN"]
node_browserstore[("Browser cache")]
node_ollamasvc{{"Ollama service"}}

node_visitor -->|"opens"| node_browser
node_browser -->|"runs inference"| node_model
node_model -->|"downloads weights"| node_modelcdn
node_model -->|"caches weights"| node_browserstore
node_serviceworker -->|"serves cached app"| node_browserstore
node_browser -->|"registers"| node_serviceworker
node_browser -->|"dispatches Book"| node_bookmode
node_bookmode -->|"requests story and plans"| node_model
node_bookmode -->|"plans pictures"| node_scene
node_bookmode -->|"renders pages"| node_sketch
node_scene -->|"resolves stamps"| node_sketch
node_sketch -->|"draws illustrations"| node_art
node_sketch -->|"uses icons"| node_stamps
node_bookmode -->|"offers book export"| node_visitor
node_animate -.->|"reads book data"| node_bookmode
node_browser -->|"dispatches selfie"| node_selfie
node_selfie -->|"uses face landmarks"| node_facefind
node_browser -->|"dispatches sharing"| node_share
node_browser -.->|"opens local chat"| node_ollama
node_ollama -.->|"sends chat requests"| node_ollamasvc
node_ollamasvc -.->|"streams replies"| node_ollama

click node_browser "https://github.com/richardawe/sketchgpt/blob/main/web/browser.html"
click node_serviceworker "https://github.com/richardawe/sketchgpt/blob/main/web/sw.js"
click node_bookmode "https://github.com/richardawe/sketchgpt/blob/main/web/book.mjs"
click node_scene "https://github.com/richardawe/sketchgpt/blob/main/web/scene.mjs"
click node_sketch "https://github.com/richardawe/sketchgpt/blob/main/web/sketch.mjs"
click node_art "https://github.com/richardawe/sketchgpt/blob/main/web/art.mjs"
click node_stamps "https://github.com/richardawe/sketchgpt/blob/main/web/stamps.mjs"
click node_animate "https://github.com/richardawe/sketchgpt/blob/main/web/animate.mjs"
click node_selfie "https://github.com/richardawe/sketchgpt/blob/main/web/face.mjs"
click node_facefind "https://github.com/richardawe/sketchgpt/blob/main/web/face-find.mjs"
click node_share "https://github.com/richardawe/sketchgpt/blob/main/web/share.mjs"
click node_ollama "https://github.com/richardawe/sketchgpt/blob/main/web/index.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_browser,node_model,node_serviceworker toneBlue
class node_bookmode,node_scene,node_sketch,node_art,node_stamps,node_animate,node_browserstore toneAmber
class node_selfie,node_facefind,node_share toneMint
class node_ollama toneRose
class node_visitor,node_modelcdn,node_ollamasvc toneIndigo
```

## Components

### Browser runtime

- [Browser app](https://github.com/richardawe/sketchgpt/blob/main/web/browser.html): `web/browser.html`
- **WebLLM model**
- [Offline worker](https://github.com/richardawe/sketchgpt/blob/main/web/sw.js): `web/sw.js`

### Book and drawing

- [Book mode](https://github.com/richardawe/sketchgpt/blob/main/web/book.mjs): `web/book.mjs`
- [Scene planning](https://github.com/richardawe/sketchgpt/blob/main/web/scene.mjs): `web/scene.mjs`
- [SVG drawing](https://github.com/richardawe/sketchgpt/blob/main/web/sketch.mjs): `web/sketch.mjs`
- [Illustration assets](https://github.com/richardawe/sketchgpt/blob/main/web/art.mjs): `web/art.mjs`
- [Stamp assets](https://github.com/richardawe/sketchgpt/blob/main/web/stamps.mjs): `web/stamps.mjs`
- [Book animation](https://github.com/richardawe/sketchgpt/blob/main/web/animate.mjs): `web/animate.mjs`

### Creative tools

- [Selfie caricature](https://github.com/richardawe/sketchgpt/blob/main/web/face.mjs): `web/face.mjs`
- [Face detection](https://github.com/richardawe/sketchgpt/blob/main/web/face-find.mjs): `web/face-find.mjs`
- [Book sharing](https://github.com/richardawe/sketchgpt/blob/main/web/share.mjs): `web/share.mjs`

### Local chat

- [Ollama chat](https://github.com/richardawe/sketchgpt/blob/main/web/index.html): `web/index.html`

### Other components

- **Visitor**
- **Model CDN**
- **Browser cache**
- **Ollama service**

## Connections

- Visitor → Browser app: opens
- Browser app → WebLLM model: runs inference
- WebLLM model → Model CDN: downloads weights
- WebLLM model → Browser cache: caches weights
- Offline worker → Browser cache: serves cached app
- Browser app → Offline worker: registers
- Browser app → Book mode: dispatches Book
- Book mode → WebLLM model: requests story and plans
- Book mode → Scene planning: plans pictures
- Book mode → SVG drawing: renders pages
- Scene planning → SVG drawing: resolves stamps
- SVG drawing → Illustration assets: draws illustrations
- SVG drawing → Stamp assets: uses icons
- Book mode → Visitor: offers book export
- Book animation → Book mode: reads book data
- Browser app → Selfie caricature: dispatches selfie
- Selfie caricature → Face detection: uses face landmarks
- Browser app → Book sharing: dispatches sharing
- Browser app → Ollama chat: opens local chat
- Ollama chat → Ollama service: sends chat requests
- Ollama service → Ollama chat: streams replies