diff --git a/README.md b/README.md index 6b5a967eb..de64146a1 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,20 @@ cd ai-engineering-from-scratch python phases/01-math-foundations/01-linear-algebra-intuition/code/vectors.py ``` +**Option B.1 — run the course site locally (offline + Code Lab).** + +```bash +cd ai-engineering-from-scratch +node site/local-server.mjs +``` + +Then open `http://127.0.0.1:5174/index.html`. + +For the student dashboard UI, open `http://127.0.0.1:5174/dashboard.html`. + +Frontend docs: `site/FRONTEND.md`. + +**Option C — find your level *(recommended)*.** Skip ahead intelligently. Inside Claude, Cursor, Codex, OpenClaw, Hermes, or any agent with SkillKit installed: **Option C — find your level *(recommended)*.** Skip ahead intelligently. Inside Claude, Cursor, Codex, OpenClaw, Hermes, or any agent with the curriculum skills installed: ```bash diff --git a/site/FRONTEND.md b/site/FRONTEND.md new file mode 100644 index 000000000..11cd9dfd2 --- /dev/null +++ b/site/FRONTEND.md @@ -0,0 +1,70 @@ +# Frontend (Local Student Dashboard) + +This repo ships a local-first student UI (Scaler-style): + +- `dashboard.html` → phase cards + global progress +- `phase.html` → per-phase lesson tiles + sidebar + progress +- `lesson.html` → lesson reader + sticky progress bar + Code Lab (run/test locally) + +All course content is read directly from this repo via a local server (no GitHub/raw content fetch). + +## Quick start + +From the repo root: + +```bash +cd ai-engineering-from-scratch +node site/local-server.mjs +``` + +Open: + +- Dashboard: `http://127.0.0.1:5174/dashboard.html` +- About/home: `http://127.0.0.1:5174/index.html` + +## How it works + +The server lives at: + +- `site/local-server.mjs` + +It provides: + +- Static files: `GET /` serves files from `site/` +- Local content: `GET /content/` serves files from the course repo (e.g. lesson markdown at `/content/phases/.../docs/en.md`) +- Directory listing: `GET /api/list?path=` returns local directory entries (used by lesson panels) +- Lesson meta: `GET /api/lesson-meta?path=phases/.../...` returns metadata and resolved runnable files +- Runner APIs: + - `POST /api/run` executes `python3` for a selected file + - `POST /api/test` runs `pytest` if installed, else `unittest` discovery +- Rubrics/AI hooks: + - `GET /api/rubric?path=...` returns `rubric.json` if present, else a generated rubric + - `POST /api/review` currently returns `501` (stub) until an LLM provider is wired up + +## Code Lab + +In `lesson.html`, the **Code Lab** panel: + +- auto-detects runnable artifacts via `/api/lesson-meta` (uses `catalog.json` + filesystem fallback) +- fetches the runnable file content from `/content/...` +- runs code via `/api/run` +- runs tests via `/api/test` + +Notes: + +- `Run` currently runs Python (`python3 -I ...`). Other languages are listed (Julia/TS/etc.) but not executed yet. +- Tests only run if the lesson directory includes a `tests/` folder or `test_*.py` files. + +## Progress tracking (local only) + +Progress is stored in browser `localStorage` by: + +- `site/progress.js` + +Resetting progress clears local completion + quiz answers for this browser only. + +## Next steps (planned) + +- Add non-Python runners (Node/TS, Julia, Rust) behind the same API. +- Implement `/api/review` with a configurable LLM provider and per-lesson rubrics. + diff --git a/site/app.js b/site/app.js index 4092ae744..c2284b52d 100644 --- a/site/app.js +++ b/site/app.js @@ -50,13 +50,12 @@ var lessons = PHASES[i].lessons; totalLessons += lessons.length; for (var j = 0; j < lessons.length; j++) { - var staticDone = lessons[j].status === 'complete'; var userDone = false; if (hasProgress && lessons[j].url) { var lp = window.AIFSProgress.extractPath(lessons[j].url); if (lp) userDone = window.AIFSProgress.isLessonComplete(lp); } - if (staticDone || userDone) completeLessons++; + if (userDone) completeLessons++; } } var completePhases = 0; @@ -113,13 +112,12 @@ var total = p.lessons.length; var done = 0; for (var j = 0; j < p.lessons.length; j++) { - var staticDone = p.lessons[j].status === 'complete'; var userDone = false; if (hasProgress && p.lessons[j].url) { var lp = window.AIFSProgress.extractPath(p.lessons[j].url); if (lp) userDone = window.AIFSProgress.isLessonComplete(lp); } - if (staticDone || userDone) done++; + if (userDone) done++; } var statusClass = p.status.replace(/ /g, '-'); var roman = toRoman(p.id); @@ -236,11 +234,12 @@ var statusClass = l.status.replace(/ /g, '-'); if (userComplete) statusClass = 'complete'; + else statusClass = 'planned'; html += '
'; html += ''; - if (l.url) { - html += '' + escapeHtml(l.name) + ''; + if (lessonPath) { + html += '' + escapeHtml(l.name) + ''; } else { html += '' + escapeHtml(l.name) + ''; } diff --git a/site/dashboard.html b/site/dashboard.html new file mode 100644 index 000000000..47a1abd70 --- /dev/null +++ b/site/dashboard.html @@ -0,0 +1,61 @@ + + + + + + Dashboard - AI Engineering from Scratch + + + + + + + + +
+
+ + +
+ +
+
+
+ +
+
+
+
+
Student dashboard
+

Your phases

+

Pick a phase, track progress, and keep shipping.

+
+
+ Continue + +
+
+ +
+ +
+
+
+ + + + + + + + + diff --git a/site/dashboard.js b/site/dashboard.js new file mode 100644 index 000000000..614ac41b0 --- /dev/null +++ b/site/dashboard.js @@ -0,0 +1,135 @@ +(function () { + var root = document.documentElement; + var stored = localStorage.getItem('theme'); + if (stored) { + root.setAttribute('data-theme', stored); + } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + root.setAttribute('data-theme', 'dark'); + } else { + root.setAttribute('data-theme', 'light'); + } + + document.addEventListener('DOMContentLoaded', function () { + initThemeToggle(); + render(); + }); + + function initThemeToggle() { + var btn = document.getElementById('themeToggle'); + var icon = document.getElementById('themeIcon'); + if (!btn || !icon) return; + + function paint() { + var theme = root.getAttribute('data-theme'); + icon.textContent = theme === 'light' ? 'N' : 'D'; + } + + btn.addEventListener('click', function () { + var current = root.getAttribute('data-theme'); + var next = current === 'light' ? 'dark' : 'light'; + root.setAttribute('data-theme', next); + localStorage.setItem('theme', next); + paint(); + }); + paint(); + } + + function extractLessonPath(url) { + var m = url ? url.match(/(phases\/[^/]+\/[^/]+)\/?$/) : null; + return m ? m[1] : ''; + } + + function countPhaseDone(phase) { + var total = phase.lessons.length; + var done = 0; + var hasProgress = !!window.AIFSProgress; + for (var i = 0; i < phase.lessons.length; i++) { + var l = phase.lessons[i]; + var userDone = false; + if (hasProgress && l.url) { + var lp = extractLessonPath(l.url); + if (lp) userDone = window.AIFSProgress.isLessonComplete(lp); + } + if (userDone) done++; + } + return { done: done, total: total }; + } + + function findContinueTarget(phases) { + var hasProgress = !!window.AIFSProgress; + for (var i = 0; i < phases.length; i++) { + var p = phases[i]; + for (var j = 0; j < p.lessons.length; j++) { + var l = p.lessons[j]; + var lp = extractLessonPath(l.url); + if (!lp) continue; + if (!hasProgress) return { phaseId: p.id, lessonPath: lp }; + if (!window.AIFSProgress.isLessonComplete(lp)) return { phaseId: p.id, lessonPath: lp }; + } + } + return { phaseId: 1, lessonPath: 'phases/01-math-foundations/01-linear-algebra-intuition' }; + } + + function renderKpis(phases) { + var el = document.getElementById('dashKpis'); + if (!el) return; + + var totalLessons = 0; + var doneLessons = 0; + for (var i = 0; i < phases.length; i++) { + totalLessons += phases[i].lessons.length; + var c = countPhaseDone(phases[i]); + doneLessons += c.done; + } + + var pct = totalLessons ? Math.round((doneLessons / totalLessons) * 100) : 0; + el.innerHTML = + '
Lessons<\/div>
' + doneLessons + ' / ' + totalLessons + '<\/div>
' + pct + '% complete<\/div><\/div>' + + '
Phases<\/div>
' + phases.length + '<\/div>
Browse any time<\/div><\/div>' + + '
Storage<\/div>
Local<\/div>
No account needed<\/div><\/div>'; + } + + function renderPhaseCards(phases) { + var grid = document.getElementById('phaseGrid'); + if (!grid) return; + var html = ''; + for (var i = 0; i < phases.length; i++) { + var p = phases[i]; + var c = countPhaseDone(p); + var pct = c.total ? Math.round((c.done / c.total) * 100) : 0; + html += ''; + html += '
'; + html += '
PHASE ' + String(p.id).padStart(2, '0') + '<\/div>'; + html += '
' + escapeHtml(p.name) + '<\/div>'; + html += '
' + c.done + ' / ' + c.total + ' lessons<\/div>'; + html += '<\/div>'; + html += '
<\/span><\/div>'; + html += '
' + escapeHtml(p.desc || '') + '<\/div>'; + html += '<\/a>'; + } + grid.innerHTML = html; + } + + function render() { + if (typeof PHASES === 'undefined' || !Array.isArray(PHASES)) return; + + renderKpis(PHASES); + renderPhaseCards(PHASES); + + var target = findContinueTarget(PHASES); + var btn = document.getElementById('continueBtn'); + if (btn && target.lessonPath) btn.href = 'lesson.html?path=' + encodeURIComponent(target.lessonPath); + + var resetBtn = document.getElementById('resetBtn'); + if (resetBtn) { + resetBtn.addEventListener('click', function () { + if (!window.AIFSProgress) return; + var ok = window.confirm('Clear all your local progress (quiz answers and completed lessons)? This cannot be undone.'); + if (!ok) return; + window.AIFSProgress.reset(); + renderKpis(PHASES); + renderPhaseCards(PHASES); + }); + } + } +})(); diff --git a/site/header.js b/site/header.js index fdb745bae..221d24a89 100644 --- a/site/header.js +++ b/site/header.js @@ -42,6 +42,18 @@ } function load() { + // Local-first mode: avoid any network calls. + try { + var host = String(window.location && window.location.hostname || ''); + var proto = String(window.location && window.location.protocol || ''); + if (proto === 'file:' || host === '127.0.0.1' || host === 'localhost') { + paint(0); + var els = document.querySelectorAll('.header-github .star-count, #starCount'); + for (var i = 0; i < els.length; i++) els[i].textContent = '—'; + return; + } + } catch (e) {} + var cached = readCache(); if (cached != null) { paint(cached); diff --git a/site/index.html b/site/index.html index 142afcf72..7e137b50d 100644 --- a/site/index.html +++ b/site/index.html @@ -576,6 +576,7 @@ AI / FROM SCRATCH