Skip to content

Commit b33bc9c

Browse files
vukrosicvukrosic
authored
Merge pull request #4 from Open-Superintelligence-Lab/course
Course
2 parents 814bfe0 + 007409a commit b33bc9c

File tree

231 files changed

+17648
-14
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

231 files changed

+17648
-14
lines changed

‎COURSE_STRUCTURE.md‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
# Course Structure Documentation
2+
3+
## Overview
4+
5+
The learning course has been reorganized to use **markdown files** stored in the `public/content/learn/` directory, following the same pattern as the blog posts. This makes it easy to manage content and add images.
6+
7+
## 📁 File Structure
8+
9+
```
10+
public/content/learn/
11+
├── README.md # Documentation for content management
12+
├── math/
13+
│ ├── functions/
14+
│ │ ├── functions-content.md
15+
│ │ └── [add your images here]
16+
│ ├── derivatives/
17+
│ │ ├── derivatives-content.md
18+
│ │ ├── derivative-graph.png
19+
│ │ └── tangent-line.png
20+
│ ├── vectors/
21+
│ │ ├── vectors-content.md
22+
│ │ └── [images included]
23+
│ ├── matrices/
24+
│ │ ├── matrices-content.md
25+
│ │ └── [images included]
26+
│ └── gradients/
27+
│ ├── gradients-content.md
28+
│ └── [images included]
29+
└── neural-networks/
30+
├── introduction/
31+
│ ├── introduction-content.md
32+
│ └── [add your images here]
33+
├── forward-propagation/
34+
│ ├── forward-propagation-content.md
35+
│ └── [add your images here]
36+
├── backpropagation/
37+
│ ├── backpropagation-content.md
38+
│ └── [add your images here]
39+
└── training/
40+
├── training-content.md
41+
└── [add your images here]
42+
```
43+
44+
## 🎓 Course Modules
45+
46+
### Module 1: Mathematics Fundamentals
47+
48+
1. **Functions** (`/learn/math/functions`)
49+
- Linear functions
50+
- Activation functions (Sigmoid, ReLU, Tanh)
51+
- Loss functions
52+
- Why non-linearity matters
53+
54+
2. **Derivatives** (`/learn/math/derivatives`)
55+
- What derivatives are
56+
- Why they matter in AI
57+
- Common derivative rules
58+
- Practical examples with loss functions
59+
60+
3. **Vectors** (`/learn/math/vectors`)
61+
- What vectors are (magnitude and direction)
62+
- Vector components and representation
63+
- Vector operations (addition, scalar multiplication)
64+
- Applications in machine learning
65+
66+
4. **Matrices** (`/learn/math/matrices`)
67+
- Matrix fundamentals
68+
- Matrix operations (multiplication, transpose)
69+
- Matrix transformations
70+
- Role in neural networks
71+
72+
5. **Gradients** (`/learn/math/gradients`)
73+
- Understanding gradients
74+
- Partial derivatives
75+
- Gradient computation
76+
- Gradient descent in optimization
77+
78+
### Module 2: Neural Networks from Scratch
79+
80+
1. **Introduction** (`/learn/neural-networks/introduction`)
81+
- What neural networks are
82+
- Basic architecture (input, hidden, output layers)
83+
- How they learn
84+
- Real-world applications
85+
86+
2. **Forward Propagation** (`/learn/neural-networks/forward-propagation`)
87+
- The forward pass process
88+
- Weighted sums and activations
89+
- Step-by-step numerical examples
90+
- Matrix operations
91+
92+
3. **Backpropagation** (`/learn/neural-networks/backpropagation`)
93+
- The backpropagation algorithm
94+
- Chain rule in action
95+
- Gradient computation
96+
- Common challenges (vanishing/exploding gradients)
97+
98+
4. **Training & Optimization** (`/learn/neural-networks/training`)
99+
- Gradient descent variants (SGD, mini-batch, batch)
100+
- Advanced optimizers (Adam, RMSprop, Momentum)
101+
- Hyperparameters and learning rate schedules
102+
- Best practices and common pitfalls
103+
104+
## 🛠️ Technical Implementation
105+
106+
### Components Created
107+
108+
1. **LessonPage Component** (`components/lesson-page.tsx`)
109+
- Reusable component that loads markdown content
110+
- Handles frontmatter parsing
111+
- Supports navigation between lessons
112+
- Similar to blog post structure
113+
114+
2. **Page Routes** (`app/learn/...`)
115+
- Each lesson has a simple page component
116+
- Uses `LessonPage` with configuration
117+
- Clean and maintainable
118+
119+
### How It Works
120+
121+
1. **Markdown files** are stored in `public/content/learn/[category]/[lesson]/`
122+
2. Each file has **frontmatter** with hero data (title, subtitle, tags)
123+
3. **Images** are placed alongside the markdown files
124+
4. **Page components** load the markdown using the `LessonPage` component
125+
5. Images are referenced as `![alt](image.png)` and served from `/content/learn/...`
126+
127+
### Example Markdown Frontmatter
128+
129+
```markdown
130+
---
131+
hero:
132+
title: "Understanding Derivatives"
133+
subtitle: "The Foundation of Neural Network Training"
134+
tags:
135+
- "📐 Mathematics"
136+
- "⏱️ 10 min read"
137+
---
138+
139+
# Your content here...
140+
141+
![Derivative Graph](derivative-graph.png)
142+
```
143+
144+
## 📝 Adding New Content
145+
146+
### To Add a New Lesson:
147+
148+
1. **Create folder structure:**
149+
```bash
150+
mkdir -p public/content/learn/[category]/[lesson-name]
151+
```
152+
153+
2. **Create markdown file:**
154+
```bash
155+
touch public/content/learn/[category]/[lesson-name]/[lesson-name]-content.md
156+
```
157+
158+
3. **Add frontmatter and content** to the markdown file
159+
160+
4. **Add images** to the same folder
161+
162+
5. **Create page component:**
163+
```tsx
164+
// app/learn/[category]/[lesson-name]/page.tsx
165+
import { LessonPage } from "@/components/lesson-page";
166+
167+
export default function YourLessonPage() {
168+
return (
169+
<LessonPage
170+
contentPath="category/lesson-name"
171+
prevLink={{ href: "/previous", label: "← Previous" }}
172+
nextLink={{ href: "/next", label: "Next →" }}
173+
/>
174+
);
175+
}
176+
```
177+
178+
## 🖼️ Adding Images
179+
180+
### Placeholder Images Currently Referenced:
181+
182+
**Math - Derivatives:**
183+
- `derivative-graph.png` - Visual showing derivative as slope
184+
- `tangent-line.png` - Tangent line illustration
185+
186+
**Math - Functions:**
187+
- `linear-function.png` - Linear function visualization
188+
- `relu-function.png` - ReLU activation graph
189+
- `function-composition.png` - Function composition diagram
190+
191+
**Neural Networks - Introduction:**
192+
- `neural-network-diagram.png` - Basic NN architecture
193+
- `layer-types.png` - Input, hidden, output layers
194+
- `training-process.png` - Training loop diagram
195+
- `depth-vs-performance.png` - Network depth impact
196+
197+
**Neural Networks - Forward Propagation:**
198+
- `forward-prop-diagram.png` - Data flow diagram
199+
- `forward-example.png` - Example calculation
200+
- `activations-comparison.png` - Different activation functions
201+
- `matrix-backprop.png` - Matrix operations
202+
203+
**Neural Networks - Backpropagation:**
204+
- `backprop-overview.png` - Algorithm overview
205+
- `backprop-steps.png` - Step-by-step process
206+
- `matrix-backprop.png` - Matrix form backprop
207+
208+
**Neural Networks - Training:**
209+
- `training-loop.png` - Training loop visualization
210+
- `gradient-descent.png` - Gradient descent illustration
211+
- `gd-variants.png` - GD variants comparison
212+
- `optimizers-comparison.png` - Optimizer behaviors
213+
- `lr-schedules.png` - Learning rate schedules
214+
- `training-curves.png` - Loss/accuracy curves
215+
216+
### To Add Your Images:
217+
218+
1. Create your images (PNG or JPG recommended)
219+
2. Place them in the appropriate lesson folder
220+
3. They're already referenced in the markdown - just replace the placeholders!
221+
222+
## 🎨 Design Features
223+
224+
- **Beautiful gradient backgrounds** matching the site theme
225+
- **Syntax highlighting** for code blocks
226+
- **Responsive design** for mobile and desktop
227+
- **Navigation** between lessons with prev/next buttons
228+
- **Markdown rendering** with support for:
229+
- Headings, paragraphs, lists
230+
- Code blocks
231+
- Images
232+
- Tables
233+
- Math formulas (using KaTeX in MarkdownRenderer)
234+
235+
## 🚀 Next Steps
236+
237+
1. **Add your images** - Replace placeholder PNG files with actual visualizations
238+
2. **Expand content** - Add more lessons or modules as needed
239+
3. **Test on localhost** - Visit `/learn` to see the course
240+
4. **Customize styling** - Adjust colors/gradients in the components if desired
241+
242+
## 📋 Summary
243+
244+
✅ Course structure created with 9 lessons (5 math + 4 neural networks)
245+
✅ Markdown files in `public/content/learn/`
246+
✅ Reusable `LessonPage` component
247+
✅ Images ready for math lessons (vectors, matrices, gradients)
248+
✅ Navigation between lessons
249+
✅ Frontmatter support for hero sections
250+
✅ README documentation in content folder
251+
252+
Your course is ready with comprehensive math fundamentals! 🎉
253+

‎app/learn/activation-functions/relu/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function ReluPage() {
4+
return (
5+
<LessonPage
6+
contentPath="activation-functions/relu"
7+
prevLink={{ href: "/learn/neuron-from-scratch/the-concept-of-learning", label: "← Previous: The Concept of Learning" }}
8+
nextLink={{ href: "/learn/activation-functions/sigmoid", label: "Next: Sigmoid →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/activation-functions/sigmoid/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function SigmoidPage() {
4+
return (
5+
<LessonPage
6+
contentPath="activation-functions/sigmoid"
7+
prevLink={{ href: "/learn/activation-functions/relu", label: "← Previous: ReLU" }}
8+
nextLink={{ href: "/learn/activation-functions/tanh", label: "Next: Tanh →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/activation-functions/silu/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function SiluPage() {
4+
return (
5+
<LessonPage
6+
contentPath="activation-functions/silu"
7+
prevLink={{ href: "/learn/activation-functions/tanh", label: "← Previous: Tanh" }}
8+
nextLink={{ href: "/learn/activation-functions/swiglu", label: "Next: SwiGLU →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/activation-functions/softmax/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function SoftmaxPage() {
4+
return (
5+
<LessonPage
6+
contentPath="activation-functions/softmax"
7+
prevLink={{ href: "/learn/activation-functions/swiglu", label: "← Previous: SwiGLU" }}
8+
nextLink={{ href: "/learn/neural-networks/introduction", label: "Next: Neural Networks →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/activation-functions/swiglu/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function SwigluPage() {
4+
return (
5+
<LessonPage
6+
contentPath="activation-functions/swiglu"
7+
prevLink={{ href: "/learn/activation-functions/silu", label: "← Previous: SiLU" }}
8+
nextLink={{ href: "/learn/activation-functions/softmax", label: "Next: Softmax →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/activation-functions/tanh/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function TanhPage() {
4+
return (
5+
<LessonPage
6+
contentPath="activation-functions/tanh"
7+
prevLink={{ href: "/learn/activation-functions/sigmoid", label: "← Previous: Sigmoid" }}
8+
nextLink={{ href: "/learn/activation-functions/silu", label: "Next: SiLU →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/attention-mechanism/applying-attention-weights/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function ApplyingAttentionWeightsPage() {
4+
return (
5+
<LessonPage
6+
contentPath="attention-mechanism/applying-attention-weights"
7+
prevLink={{ href: "/learn/attention-mechanism/calculating-attention-scores", label: "← Previous: Calculating Attention Scores" }}
8+
nextLink={{ href: "/learn/attention-mechanism/multi-head-attention", label: "Next: Multi Head Attention →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/attention-mechanism/attention-in-code/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function AttentionInCodePage() {
4+
return (
5+
<LessonPage
6+
contentPath="attention-mechanism/attention-in-code"
7+
prevLink={{ href: "/learn/attention-mechanism/multi-head-attention", label: "← Previous: Multi Head Attention" }}
8+
nextLink={{ href: "/learn/transformer-feedforward/the-feedforward-layer", label: "Next: The Feedforward Layer →" }}
9+
/>
10+
);
11+
}
12+

‎app/learn/attention-mechanism/calculating-attention-scores/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LessonPage } from "@/components/lesson-page";
2+
3+
export default function CalculatingAttentionScoresPage() {
4+
return (
5+
<LessonPage
6+
contentPath="attention-mechanism/calculating-attention-scores"
7+
prevLink={{ href: "/learn/attention-mechanism/self-attention-from-scratch", label: "← Previous: Self Attention from Scratch" }}
8+
nextLink={{ href: "/learn/attention-mechanism/applying-attention-weights", label: "Next: Applying Attention Weights →" }}
9+
/>
10+
);
11+
}
12+

0 commit comments

Comments
 (0)