Python for Image Gen

An interactive, one-day course that takes an experienced JavaScript and Rust developer from Python fundamentals up to training a tiny diffusion model and running a real Stable Diffusion model locally on Apple Silicon.

It is a fully static single-page-style site: no backend, no database, no API routes. Real Python runs in the browser via Pyodide, and progress lives in localStorage.

What is inside

• 13 modules, 36 lessons, from "why Python is not actually slow" to running Stable Diffusion on an M2 Air. Every concept is bridged from the JavaScript, TypeScript, and Rust the learner already knows.
• Live Python code cells (Pyodide + NumPy) in the fundamentals and NumPy modules: edit the code and run it, right in the browser. Pyodide is loaded lazily the first time you press Run.
• Run on your Mac copy blocks for the PyTorch and diffusion code, which cannot run in a browser.
• Signature interactions: a denoising hero that resolves from pure noise as you finish lessons, a drag-the-noise slider, JS-to-Python flip cards, a swipeable module carousel, and scratch-off answer reveals.

Tech stack

• SvelteKit with Svelte 5 runes ($state, $derived, $effect, $props).
• @sveltejs/adapter-static with full prerendering, so it deploys as pure static files.
• Tailwind CSS v4 (CSS-first theme).
• Pyodide for in-browser Python, loaded on demand from the jsDelivr CDN.
• Shiki for syntax highlighting, code-split so it does not weigh down first load.
• Bun as the package manager and runtime.

Local development

Requires Bun.

bun install
bun run dev      # start the dev server

Then open the printed local URL.

Other scripts:

bun run build    # produce the static site in ./build
bun run preview  # serve the production build locally
bun run check    # type-check with svelte-check

Deploy (Netlify)

The repo includes a netlify.toml:

[build]
	command = "bun run build"
	publish = "build"

On Netlify, connect the repository and it will build with Bun and publish the build directory. Because every route is prerendered (export const prerender = true), the output is plain static HTML, CSS, and JS. Pyodide is fetched from its CDN at runtime, so no extra configuration is needed.

How progress works

A single JSON object is stored under pyimggen:progress in localStorage:

• completed: which lessons are marked done (drives the denoising hero and all progress bars).
• code: the learner's edited code in each live cell, so experiments survive a refresh.
• last: the last visited lesson, powering the "Resume" action on the home screen.

All localStorage access is guarded for SSR/prerender (it only happens after mount), and there is a visible "reset" control in the header. No cookies, no server, no tracking.

Project layout

src/
  app.css                     theme tokens and global styles (Tailwind v4)
  lib/
    content/course.ts         the entire course as structured block data
    components/               CodeCell, FlipCard, NoiseSlider, DenoiseHero, ...
    pyodide.ts                lazy Pyodide loader and run helper
    highlight.ts              lazy Shiki wrapper
    progress.svelte.ts        the runes-based localStorage progress store
  routes/
    +page.svelte              home (hero, resume, module carousel)
    module/[id]/              a module and its lessons