Skip to content

Commit f938c2e

Browse files
vukrosicvukrosic
committed
Refactor ZeroToAIResearcher page to load markdown content dynamically
- Renamed the component from BlueberryLLMPage to ZeroToAIResearcherPage for clarity. - Implemented dynamic loading of markdown content from an external file, enhancing content management. - Introduced a loading state while fetching content to improve user experience. - Updated the layout to include course links and a call to action, promoting community engagement and resource exploration.
1 parent 382e1ce commit f938c2e

File tree

2 files changed

+307
-232
lines changed

2 files changed

+307
-232
lines changed

‎app/blog/zero-to-ai-researcher/page.tsx‎

Lines changed: 69 additions & 232 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
'use client';
22

33
import Link from "next/link";
4+
import { MarkdownRenderer } from "@/components/markdown-renderer";
5+
import { useState, useEffect } from "react";
46

5-
export default function BlueberryLLMPage() {
7+
export default function ZeroToAIResearcherPage() {
8+
const [markdownContent, setMarkdownContent] = useState("");
69

10+
useEffect(() => {
11+
// Fetch the markdown content
12+
fetch('/zero-to-ai-researcher-content.md')
13+
.then(response => response.text())
14+
.then(content => setMarkdownContent(content))
15+
.catch(error => console.error('Error loading markdown content:', error));
16+
}, []);
717
return (
818
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
919
{/* Blog Content */}
@@ -13,245 +23,72 @@ export default function BlueberryLLMPage() {
1323
← Back to Home
1424
</Link>
1525
</div>
26+
27+
28+
{/* Course Links */}
29+
<div className="mb-12">
30+
<div className="flex items-center gap-4 text-slate-400 text-sm mb-8">
31+
<span>Open Superintelligence Lab</span>
32+
<span>•</span>
33+
<span>September 2025</span>
34+
<span>•</span>
35+
<a
36+
href="https://github.com/vukrosic/zero-to-ai-researcher/tree/main/_course"
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
className="text-blue-400 hover:text-blue-300 transition-colors"
40+
>
41+
View Course
42+
</a>
43+
<span>•</span>
44+
<a
45+
href="https://github.com/vukrosic/zero-to-ai-researcher"
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
className="text-blue-400 hover:text-blue-300 transition-colors"
49+
>
50+
View Repository
51+
</a>
52+
</div>
53+
</div>
54+
55+
{/* Markdown Content */}
1656
<article className="prose prose-invert max-w-none">
17-
{/* Title */}
18-
<header className="mb-12">
19-
<h1 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
20-
Zero To AI Researcher - Full Course
21-
</h1>
22-
<div className="flex items-center gap-4 text-slate-400 text-sm">
23-
<span>Open Superintelligence Lab</span>
24-
<span>•</span>
25-
<span>January 2025</span>
26-
<span>•</span>
57+
{markdownContent ? (
58+
<MarkdownRenderer content={markdownContent} />
59+
) : (
60+
<div className="text-center py-12">
61+
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto mb-4"></div>
62+
<p className="text-slate-400">Loading content...</p>
63+
</div>
64+
)}
65+
</article>
66+
67+
{/* Call to Action */}
68+
<section className="text-center mt-12">
69+
<div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 border border-blue-500/30 rounded-xl p-8">
70+
<h2 className="text-2xl font-bold mb-4 text-white">Ready to Start Your AI Research Journey?</h2>
71+
<p className="text-slate-300 mb-6">
72+
Join the open-source community and contribute to cutting-edge AI research
73+
</p>
74+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
2775
<a
28-
href="https://github.com/vukrosic/zero-to-ai-researcher/tree/main/_course"
29-
target="_blank"
76+
href="https://github.com/vukrosic/zero-to-ai-researcher"
77+
target="_blank"
3078
rel="noopener noreferrer"
31-
className="text-blue-400 hover:text-blue-300 transition-colors"
79+
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105"
3280
>
33-
View Course
81+
Explore Repository
3482
</a>
35-
<span>•</span>
36-
<a
37-
href="https://github.com/vukrosic/zero-to-ai-researcher"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
className="text-blue-400 hover:text-blue-300 transition-colors"
83+
<Link
84+
href="/about"
85+
className="px-6 py-3 border border-slate-600 text-slate-300 font-semibold rounded-lg hover:border-blue-500 hover:text-blue-400 transition-all duration-300"
4186
>
42-
View Repository
43-
</a>
44-
45-
</div>
46-
</header>
47-
48-
{/* Video Placeholder */}
49-
<div className="mb-12">
50-
<div className="aspect-video bg-slate-800/50 rounded-xl border border-slate-600/50 flex items-center justify-center">
51-
<div className="text-center">
52-
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
53-
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
54-
<path d="M8 5v14l11-7z"/>
55-
</svg>
56-
</div>
57-
<p className="text-slate-400">Course Introduction Video</p>
58-
<p className="text-slate-500 text-sm">Coming Soon</p>
59-
</div>
87+
Learn More About Us
88+
</Link>
6089
</div>
6190
</div>
62-
63-
{/* Introduction */}
64-
<section className="mb-12">
65-
<p className="text-lg text-slate-300 leading-relaxed mb-6">
66-
The <strong>Blueberry LLM Research Course</strong> is a comprehensive educational journey that takes you from zero to AI researcher,
67-
focusing on cutting-edge transformer architectures including Mixture of Experts (MoE) models inspired by DeepSeek and GLM4.
68-
</p>
69-
<p className="text-slate-300 leading-relaxed">
70-
This course provides hands-on experience with advanced AI research methodologies, from foundational concepts to implementing
71-
state-of-the-art architectures. Whether you&apos;re a beginner or looking to deepen your understanding of modern LLM research,
72-
this course offers a structured path to becoming an AI researcher.
73-
</p>
74-
</section>
75-
76-
{/* Key Questions */}
77-
<section className="mb-12">
78-
<h2 className="text-2xl font-bold mb-6 text-white">Key Questions This Course Answers</h2>
79-
<div className="space-y-6">
80-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
81-
<h3 className="text-lg font-semibold mb-3 text-blue-400">1. How do Mixture of Experts (MoE) models work and why are they crucial for scaling LLMs?</h3>
82-
<p className="text-slate-300">
83-
Learn the fundamentals of MoE architecture, expert routing mechanisms, and load balancing strategies that enable
84-
efficient scaling of language models while maintaining computational efficiency.
85-
</p>
86-
</div>
87-
88-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
89-
<h3 className="text-lg font-semibold mb-3 text-purple-400">2. What makes DeepSeek&apos;s attention mechanisms innovative and how can they be combined with MoE?</h3>
90-
<p className="text-slate-300">
91-
Explore DeepSeek&apos;s advanced attention mechanisms, including sparse attention patterns, RoPE scaling, and LoRA-style projections,
92-
and understand how to integrate them with MoE architectures for optimal performance.
93-
</p>
94-
</div>
95-
96-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
97-
<h3 className="text-lg font-semibold mb-3 text-cyan-400">3. How do you conduct systematic AI research and evaluate different architectures?</h3>
98-
<p className="text-slate-300">
99-
Master the art of AI research through structured experimentation, ablation studies, benchmarking methodologies,
100-
and learn how to design and execute comprehensive research projects in the field of large language models.
101-
</p>
102-
</div>
103-
</div>
104-
</section>
105-
106-
{/* Course Structure */}
107-
<section className="mb-12">
108-
<h2 className="text-2xl font-bold mb-6 text-white">Course Structure</h2>
109-
<div className="grid md:grid-cols-2 gap-6">
110-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
111-
<h3 className="text-lg font-semibold mb-4 text-green-400">Foundation Modules</h3>
112-
<ul className="space-y-2 text-slate-300">
113-
<li>• Python fundamentals for AI research</li>
114-
<li>• Mathematical foundations (linear algebra, calculus)</li>
115-
<li>• PyTorch basics and tensor operations</li>
116-
<li>• Neural network fundamentals</li>
117-
<li>• Activation functions and optimization</li>
118-
</ul>
119-
</div>
120-
121-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
122-
<h3 className="text-lg font-semibold mb-4 text-blue-400">Advanced Topics</h3>
123-
<ul className="space-y-2 text-slate-300">
124-
<li>• Attention mechanisms and transformers</li>
125-
<li>• DeepSeek attention implementation</li>
126-
<li>• GLM4 MoE architecture</li>
127-
<li>• Hybrid model combinations</li>
128-
<li>• Research methodology and evaluation</li>
129-
</ul>
130-
</div>
131-
</div>
132-
</section>
133-
134-
{/* Key Features */}
135-
<section className="mb-12">
136-
<h2 className="text-2xl font-bold mb-6 text-white">What You&apos;ll Build</h2>
137-
<div className="grid md:grid-cols-3 gap-6">
138-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6 text-center">
139-
<div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mx-auto mb-4">
140-
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
141-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
142-
</svg>
143-
</div>
144-
<h3 className="font-semibold mb-2 text-white">MoE Models</h3>
145-
<p className="text-slate-400 text-sm">Implement efficient Mixture of Experts architectures with expert routing and load balancing</p>
146-
</div>
147-
148-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6 text-center">
149-
<div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mx-auto mb-4">
150-
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
151-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
152-
</svg>
153-
</div>
154-
<h3 className="font-semibold mb-2 text-white">DeepSeek Attention</h3>
155-
<p className="text-slate-400 text-sm">Build advanced attention mechanisms with RoPE scaling and sparse patterns</p>
156-
</div>
157-
158-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6 text-center">
159-
<div className="w-12 h-12 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg flex items-center justify-center mx-auto mb-4">
160-
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
161-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
162-
</svg>
163-
</div>
164-
<h3 className="font-semibold mb-2 text-white">Research Framework</h3>
165-
<p className="text-slate-400 text-sm">Develop systematic experimentation and evaluation methodologies</p>
166-
</div>
167-
</div>
168-
</section>
169-
170-
{/* Experiments */}
171-
<section className="mb-12">
172-
<h2 className="text-2xl font-bold mb-6 text-white">Hands-On Experiments</h2>
173-
<div className="space-y-4">
174-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
175-
<h3 className="text-lg font-semibold mb-2 text-yellow-400">Experiment 1: Architecture Ablation Study</h3>
176-
<p className="text-slate-300 text-sm mb-3">
177-
Compare 5 different model variants (baseline, MLP, attention+MLP, MoE, attention+MoE) to understand the impact of each component.
178-
</p>
179-
<span className="inline-block bg-slate-700/50 text-slate-300 text-xs px-2 py-1 rounded">HellaSwag Benchmark</span>
180-
</div>
181-
182-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
183-
<h3 className="text-lg font-semibold mb-2 text-orange-400">Experiment 2: Learning Rate Optimization</h3>
184-
<p className="text-slate-300 text-sm mb-3">
185-
Systematic exploration of optimal learning rates for DeepSeek attention + MLP combinations.
186-
</p>
187-
<span className="inline-block bg-slate-700/50 text-slate-300 text-xs px-2 py-1 rounded">Grid Search</span>
188-
</div>
189-
190-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
191-
<h3 className="text-lg font-semibold mb-2 text-red-400">Experiment 3: Expert Configuration Search</h3>
192-
<p className="text-slate-300 text-sm mb-3">
193-
Optimize expert count, learning rates, and top-k values for DeepSeek attention + GLM4 MoE hybrid models.
194-
</p>
195-
<span className="inline-block bg-slate-700/50 text-slate-300 text-xs px-2 py-1 rounded">Validation Metrics</span>
196-
</div>
197-
</div>
198-
</section>
199-
200-
{/* Getting Started */}
201-
<section className="mb-12">
202-
<h2 className="text-2xl font-bold mb-6 text-white">Getting Started</h2>
203-
<div className="bg-slate-800/30 border border-slate-600/30 rounded-lg p-6">
204-
<div className="space-y-4">
205-
<div>
206-
<h3 className="font-semibold mb-2 text-green-400">1. Clone the Repository</h3>
207-
<div className="bg-slate-900/50 rounded-lg p-3 font-mono text-sm text-slate-300">
208-
git clone https://github.com/vukrosic/zero-to-ai-researcher
209-
</div>
210-
</div>
211-
212-
<div>
213-
<h3 className="font-semibold mb-2 text-blue-400">2. Install Dependencies</h3>
214-
<div className="bg-slate-900/50 rounded-lg p-3 font-mono text-sm text-slate-300">
215-
pip install -r requirements.txt
216-
</div>
217-
</div>
218-
219-
<div>
220-
<h3 className="font-semibold mb-2 text-purple-400">3. Start Learning</h3>
221-
<div className="bg-slate-900/50 rounded-lg p-3 font-mono text-sm text-slate-300">
222-
cd _course/01_python_beginner_lessons
223-
</div>
224-
</div>
225-
</div>
226-
</div>
227-
</section>
228-
229-
{/* Call to Action */}
230-
<section className="text-center">
231-
<div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 border border-blue-500/30 rounded-xl p-8">
232-
<h2 className="text-2xl font-bold mb-4 text-white">Ready to Start Your AI Research Journey?</h2>
233-
<p className="text-slate-300 mb-6">
234-
Join the open-source community and contribute to cutting-edge AI research
235-
</p>
236-
<div className="flex flex-col sm:flex-row gap-4 justify-center">
237-
<a
238-
href="https://github.com/vukrosic/zero-to-ai-researcher"
239-
target="_blank"
240-
rel="noopener noreferrer"
241-
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105"
242-
>
243-
Explore Repository
244-
</a>
245-
<Link
246-
href="/about"
247-
className="px-6 py-3 border border-slate-600 text-slate-300 font-semibold rounded-lg hover:border-blue-500 hover:text-blue-400 transition-all duration-300"
248-
>
249-
Learn More About Us
250-
</Link>
251-
</div>
252-
</div>
253-
</section>
254-
</article>
91+
</section>
25592
</main>
25693
</div>
25794
);

0 commit comments

Comments
 (0)