How skredx/dip-lab works
DIP Lab is an interactive digital-image-processing learning platform. A learner opens a curriculum topic, adjusts its controls or image source, and explores a live lab stage with plots, images, and—when enabled—generated mathematical steps. The graph separates curriculum and routing, shared workbench UI, lab implementations, image-processing algorithms, and derivation logic. README capabilities such as linked pixel/histogram selection and the five-unit curriculum are documented, but their full wiring and unsampled lab implementations were not inspected; those relationships are not presented as verified calls.
Main entry points: LabPage.tsx Lab page · unit1Labs.tsx Fundamentals labs · registryMap.ts Lab registry · unit2Labs.tsx Histogram labs
Components 26
Curriculum and routing
- App routes
src/App.tsx - Topic landing
src/pages/LandingPage.tsx - Topic catalog
src/content/registry.ts - Lab page
src/pages/LabPage.tsx - Lab registry
src/labs/registryMap.ts - Topic introductions
src/content/topicIntros.ts
Workbench interface
- Lab workbench
src/components/shell/LabLayout.tsx - Lab controls
src/components/controls/Slider.tsx - Image picker
src/components/controls/ImagePicker.tsx - Shared interaction state
src/state/store.ts - Plots and image views
src/components/plots/CanvasImage.tsx - Math display
src/components/math/KatexView.tsx
Interactive labs
- Fundamentals labs
src/labs/unit1Labs.tsx - Histogram labs
src/labs/unit2Labs.tsx - Spatial filtering labs
src/labs/unit3Labs.tsx - Bilateral filtering labs
src/labs/unit4Labs.tsx - Image formation labs
src/labs/unit5Labs.tsx
Image processing
- Procedural images
src/engine/image/procedural.ts - Histogram analysis
src/engine/image/histogram.ts - Lookup tables
src/engine/image/lut.ts - Image transforms
src/engine/image/transforms.ts - Spatial filters
src/engine/image/filters.ts - Image formation
src/engine/image/formation.ts
Math derivations
- Step derivation engine
src/engine/math/stepEngine.ts - Advanced derivation drawer
src/components/shell/AdvancedDrawer.tsx
Other components
- Learner
Connections 39
- Learner → App routes: opens
src/App.tsx - App routes → Topic landing: routes to
src/App.tsx - App routes → Lab page: routes to
src/App.tsx - Topic landing → Topic catalog: lists topics
src/pages/LandingPage.tsx - Lab page → Topic catalog: looks up topic
src/pages/LabPage.tsx - Lab page → Lab registry: gets lab
src/pages/LabPage.tsx - Lab registry → Fundamentals labs: dispatches
src/labs/registryMap.ts - Lab registry → Histogram labs: dispatches
src/labs/registryMap.ts - Lab registry → Spatial filtering labs: dispatches
src/labs/registryMap.ts - Lab registry → Bilateral filtering labs: dispatches
src/labs/registryMap.ts - Lab registry → Image formation labs: dispatches
src/labs/registryMap.ts - Lab page → Lab workbench: renders in
src/pages/LabPage.tsx - Lab page → Lab controls: renders
src/pages/LabPage.tsx - Lab page → Image picker: renders
src/pages/LabPage.tsx - Lab page → Procedural images: generates image
src/pages/LabPage.tsx - Lab page → Shared interaction state: reads mode
src/pages/LabPage.tsx - Lab workbench → Topic introductions: shows intro
src/components/shell/LabLayout.tsx - Lab workbench → Advanced derivation drawer: shows steps
src/components/shell/LabLayout.tsx - Lab workbench → Shared interaction state: reads mode
src/components/shell/LabLayout.tsx - Lab controls → Shared interaction state: updates
src/components/controls/Slider.tsx - Image picker → Procedural images: creates preset
src/components/controls/ImagePicker.tsx - Fundamentals labs → Plots and image views: renders
src/labs/unit1Labs.tsx - Histogram labs → Plots and image views: renders
src/labs/unit2Labs.tsx - Fundamentals labs → Image transforms: uses
src/labs/unit1Labs.tsx - Fundamentals labs → Histogram analysis: uses
src/labs/unit1Labs.tsx - Fundamentals labs → Lookup tables: uses
src/labs/unit1Labs.tsx - Fundamentals labs → Step derivation engine: builds derivations
src/labs/unit1Labs.tsx - Fundamentals labs → Math display: renders notation
src/labs/unit1Labs.tsx - Histogram labs → Histogram analysis: uses
src/labs/unit2Labs.tsx - Histogram labs → Lookup tables: uses
src/labs/unit2Labs.tsx - Histogram labs → Image transforms: uses
src/labs/unit2Labs.tsx - Bilateral filtering labs → Spatial filters: uses
src/labs/unit4Labs.tsx - Bilateral filtering labs → Image transforms: uses
src/labs/unit4Labs.tsx - Bilateral filtering labs → Step derivation engine: builds derivations
src/labs/unit4Labs.tsx - Step derivation engine → Advanced derivation drawer: provides steps
- Learner → Shared interaction state: probes or brushes
README.md - Shared interaction state → Plots and image views: links highlights
README.md - Spatial filtering labs → Spatial filters: uses filtering
- Image formation labs → Image formation: uses formation