English · 中文
▶ Live site — aipath.buynao.com · no signup, every concept is playable
↑ The homepage hero (Lesson 15 · the next-token game): an LLM guesses one token at a time — turn the temperature and watch its top-5 candidates reshape, from focused to “wild.”
A from-scratch AI course designed for absolute beginners — 6 stages, 30 lessons. No piles of formulas, no jargon dumps. It packs the core principles of AI into intuition through visualizations and interactive demos, then has you write real code to build an AI app that actually runs.
From "what is a neural network" to "building a RAG knowledge base with your own hands," this course takes you the whole way from AI-news bystander to AI-app builder. Each lesson is about 20 minutes, beginner-friendly, and barely touches math.
Fully bilingual (中文 / English). All 30 lessons — every lesson body, interactive demo, and quiz — are available in both Chinese and English; a built-in language switch flips the whole site instantly, no reload.
This project (course content, copy, interactive demos, and frontend code) was generated by Claude Fable. The 30 lessons were polished word by word, every interactive visualization (2D/3D/SVG/Canvas) was implemented lesson by lesson and verified in a headless browser, and the entire design system and React architecture were produced end-to-end by AI.
- Intuition first — We start from a picture, not a formula. Training is "feeling your way downhill," attention is "highlighting what matters," diffusion is "wiping a picture out of noise." Build the mental image first, and the terms and math have somewhere to land.
- Visual and playable — Every key concept comes with a 2D/3D interactive demo: drag a neuron's weights, twist the temperature knob, roam a 3D starfield of word vectors, chop a document into chunks and feed it to RAG yourself. What you've played with is what truly becomes yours.
- Hands-on by the end — The final stage writes real code: call an LLM API, run an open-source model on your own machine (Ollama), build a RAG knowledge base, and understand the evaluation and safety red lines before going live.
| Stage | Theme | Lessons |
|---|---|---|
| 1 · Intuition | What AI really is | 01 The three circles · 02 How machines learn · 03 A single neuron · 04 Gradient descent · 05 Data & overfitting |
| 2 · Principles | The four pillars of deep learning | 06 Backpropagation · 07 CNN · 08 Embedding · 09 Attention · 10 Transformer |
| 3 · Large Models | How an LLM is forged | 11 Token · 12 Pretraining · 13 SFT/RLHF · 14 Temperature & sampling · 15 Scaling Laws |
| 4 · Applications | Putting large models to work | 16 Prompt engineering · 17 Context · 18 RAG · 19 Function Calling · 20 Agent |
| 5 · Frontier | Multimodal & reasoning | 21 Diffusion models · 22 Multimodal · 23 Reasoning models · 24 MCP ecosystem · 25 The LLM landscape |
| 6 · Practice | Build an AI app yourself | 26 Calling APIs · 27 Local deployment · 28 RAG in practice · 29 Evaluation & safety · 30 The road ahead |
Every lesson follows the same structure: core concept (explained intuitively) → interactive demo (tune the parameters yourself) → common pitfalls (fixing misconceptions) → mini exercise (test as you learn). The lesson page has a fixed table of contents on the left so you can jump to any lesson anytime.
npm install # install dependencies
npm run dev # dev server (hot reload) → http://localhost:5173
npm run build # production build to dist/
npm run preview # preview the production build locally → http://localhost:4173learn-x/
├── index.html # single Vite entry
├── vite.config.js
├── src/
│ ├── main.jsx # mount + global style imports
│ ├── App.jsx # route table (data-driven, auto-registered from lessons)
│ ├── data/lessons.js # catalog metadata for 6 stages × 30 lessons (single source of truth)
│ ├── styles/ # style.css · lesson.css · app.css (home / per-lesson styles)
│ ├── components/ # shared component library
│ │ ├── Nav.jsx · Footer.jsx · Pager.jsx
│ │ ├── LessonNav.jsx # fixed left TOC on lesson pages (grouped by six stages · highlights current lesson)
│ │ ├── ui.jsx # Pill / Dots / Lsec / DemoPanel / Chips / FlipCard / SliderRow / QuizItem
│ │ └── LossChart.jsx # Recharts loss curve
│ ├── pages/
│ │ ├── Home.jsx # home page: philosophy + learning path + usage (data-driven render)
│ │ └── LessonPage.jsx # lesson page shell + lazy registry of 30 lessons
│ └── lessons/
│ ├── L01.jsx … L30.jsx # all 30 lessons
│ └── viz/ # framework-agnostic visualization controllers
│ ├── NeuralNetViz.jsx # home-page neural network canvas animation
│ ├── gradientDescent.js # three.js 3D descent
│ ├── cosmos.js # three.js word-vector starfield
│ ├── convScan.js # CNN convolution scan canvas
│ └── diffusion.js # diffusion denoising / CFG canvas
└── legacy/ # original static site before migration (30-lesson HTML backup, migration reference)
All 30 lessons have been migrated to a Vite + React architecture and pass the production build. Complex interactions (three.js / canvas / declarative SVG) were verified lesson by lesson in a headless browser.
- Course system, 30-lesson outline, design system
- Vite + React architecture: scaffold + component library + data layer + home page
- Stage 1 · Intuition (L01–L05)
- Stage 2 · Principles (L06–L10)
- Stage 3 · Large Models (L11–L15)
- Stage 4 · Applications (L16–L20)
- Stage 5 · Frontier (L21–L25)
- Stage 6 · Practice (L26–L30)
- Fixed left TOC on lesson pages, code splitting, dark mode
- Full Chinese / English bilingual: all 30 lesson bodies, demos, and quizzes
Generated with Claude Fable · An AI literacy course designed for beginners