MicroGPT Visual

Interactive, step-by-step visualization of microgpt.py using static HTML + JavaScript, with D3.js and Chart.js visuals.

Features

• 20-step walkthrough of the script
• Left timeline/accordion with explanations and code snippets
• Right visualization panel with D3/Chart.js diagrams
• Keyboard + button navigation (←, →, Home, End)
• Playwright test suite covering all steps and navigation

Project Structure

• index.html — app shell
• css/style.css — theme and layout styles
• js/ — data, visualization modules, app controller
• lib/ — local vendor scripts (d3.min.js, chart.umd.min.js)
• tests/ — Playwright tests

Getting Started

1) Install dependencies

npm install

2) Run locally

npx http-server . -p 8090 -c-1

Open: http://localhost:8090

Testing

Run the full Playwright suite:

npx playwright test --config=playwright.config.js

Install Chromium once if needed:

npx playwright install chromium

Notes

• This project is static and intended for simple hosting (no build step).
• Local copies of D3 and Chart.js are used under lib/ for reliable loading in automated tests.