Skip to content

Commit 16b7e8c

Browse files
xiukedingliuqi20
xiukeding
authored and
liuqi20
committed
2026-03-22 06:49:30
1 parent eda4792 commit 16b7e8c

2 files changed

Lines changed: 937 additions & 0 deletions

File tree

‎examples/examples-slides.html‎

Lines changed: 393 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>llama.cpp Examples - Code Architecture</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f0f23; color: #fff; }
10+
.slide { min-height: 100vh; padding: 60px 80px; display: flex; flex-direction: column; border-bottom: 1px solid #333; }
11+
.slide-number { position: fixed; top: 20px; right: 40px; font-size: 14px; color: #666; }
12+
h1 { font-size: 2.8em; margin-bottom: 40px; background: linear-gradient(135deg, #f64f59, #c471ed, #12a4d9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
13+
h2 { font-size: 2em; margin-bottom: 30px; color: #12a4d9; }
14+
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
15+
.card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 12px; padding: 24px; border: 1px solid #333; transition: transform 0.3s, box-shadow 0.3s; }
16+
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(18, 164, 217, 0.2); }
17+
.card h3 { color: #f64f59; margin-bottom: 12px; font-size: 1.3em; }
18+
.card p { color: #aaa; line-height: 1.6; font-size: 0.95em; }
19+
.tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.8em; margin: 4px; }
20+
.tag-lang { background: #12a4d9; color: #000; }
21+
.tag-platform { background: #c471ed; color: #fff; }
22+
.tag-feature { background: #f64f59; color: #fff; }
23+
.tree { font-family: 'Consolas', monospace; font-size: 0.9em; line-height: 1.8; }
24+
.tree .dir { color: #12a4d9; }
25+
.tree .file { color: #c471ed; }
26+
.tree .comment { color: #666; }
27+
ul { list-style: none; padding-left: 20px; }
28+
ul li { padding: 8px 0; position: relative; }
29+
ul li::before { content: '▸'; position: absolute; left: -20px; color: #f64f59; }
30+
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
31+
.highlight-box { background: linear-gradient(135deg, #f64f59 0%, #c471ed 100%); padding: 20px; border-radius: 12px; text-align: center; margin: 10px 0; }
32+
.stat { font-size: 3em; font-weight: bold; color: #12a4d9; }
33+
code { background: #1a1a2e; padding: 2px 8px; border-radius: 4px; color: #c471ed; }
34+
.flow { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
35+
.flow-item { background: #1a1a2e; padding: 20px 30px; border-radius: 8px; border: 2px solid #12a4d9; text-align: center; }
36+
.flow-arrow { color: #f64f59; font-size: 2em; }
37+
</style>
38+
</head>
39+
<body>
40+
41+
<div class="slide" id="s1">
42+
<span class="slide-number">1 / 12</span>
43+
<h1>llama.cpp Examples</h1>
44+
<p style="font-size: 1.4em; color: #aaa; margin-bottom: 40px;">A comprehensive showcase of example programs demonstrating various capabilities of the llama.cpp inference engine</p>
45+
<div class="grid">
46+
<div class="highlight-box">
47+
<div class="stat">40+</div>
48+
<div>Example Projects</div>
49+
</div>
50+
<div class="highlight-box">
51+
<div class="stat">C++</div>
52+
<div>Primary Language</div>
53+
</div>
54+
<div class="highlight-box">
55+
<div class="stat">5+</div>
56+
<div>Platform Targets</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<div class="slide" id="s2">
62+
<span class="slide-number">2 / 12</span>
63+
<h2>Directory Structure Overview</h2>
64+
<div class="tree">
65+
<span class="dir">examples/</span>
66+
├── <span class="dir">batched/</span> <span class="comment">- Batch inference examples</span>
67+
├── <span class="dir">debug/</span> <span class="comment">- Debugging utilities</span>
68+
├── <span class="dir">embedding/</span> <span class="comment">- Text embedding demos</span>
69+
├── <span class="dir">parallel/</span> <span class="comment">- Parallel processing</span>
70+
├── <span class="dir">retrieval/</span> <span class="comment">- RAG retrieval</span>
71+
├── <span class="dir">speculative/</span> <span class="comment">- Speculative decoding</span>
72+
├── <span class="dir">training/</span> <span class="comment">- Model fine-tuning</span>
73+
├── <span class="dir">simple/</span> <span class="comment">- Basic usage examples</span>
74+
├── <span class="dir">llama.swiftui/</span> <span class="comment">- iOS/macOS app</span>
75+
├── <span class="dir">llama.android/</span> <span class="comment">- Android app</span>
76+
└── <span class="file">CMakeLists.txt</span> <span class="comment">- Build configuration</span>
77+
</div>
78+
</div>
79+
80+
<div class="slide" id="s3">
81+
<span class="slide-number">3 / 12</span>
82+
<h2>Core Inference Examples</h2>
83+
<div class="grid">
84+
<div class="card">
85+
<h3>simple/</h3>
86+
<p>Minimal example demonstrating basic llama.cpp usage: model loading, tokenization, and text generation</p>
87+
<div>
88+
<span class="tag tag-lang">C++</span>
89+
<span class="tag tag-feature">Basic</span>
90+
</div>
91+
</div>
92+
<div class="card">
93+
<h3>batched/</h3>
94+
<p>Efficient batch processing of multiple prompts simultaneously for higher throughput</p>
95+
<div>
96+
<span class="tag tag-lang">C++</span>
97+
<span class="tag tag-feature">Batch</span>
98+
</div>
99+
</div>
100+
<div class="card">
101+
<h3>speculative/</h3>
102+
<p>Speculative decoding for faster inference using smaller draft models</p>
103+
<div>
104+
<span class="tag tag-lang">C++</span>
105+
<span class="tag tag-feature">Performance</span>
106+
</div>
107+
</div>
108+
<div class="card">
109+
<h3>parallel/</h3>
110+
<p>Multi-threaded parallel inference for concurrent request handling</p>
111+
<div>
112+
<span class="tag tag-lang">C++</span>
113+
<span class="tag tag-feature">Concurrency</span>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<div class="slide" id="s4">
120+
<span class="slide-number">4 / 12</span>
121+
<h2>Embedding & Retrieval</h2>
122+
<div class="grid">
123+
<div class="card">
124+
<h3>embedding/</h3>
125+
<p>Generate text embeddings for semantic search and similarity matching. Supports various embedding models.</p>
126+
<ul>
127+
<li>Sentence transformer style embeddings</li>
128+
<li>Cosine similarity computation</li>
129+
<li>Batch embedding generation</li>
130+
</ul>
131+
</div>
132+
<div class="card">
133+
<h3>retrieval/</h3>
134+
<p>Retrieval-Augmented Generation (RAG) implementation with llama.cpp. Combines embedding + retrieval + generation.</p>
135+
<ul>
136+
<li>Vector database integration</li>
137+
<li>Context injection</li>
138+
<li>Hybrid search support</li>
139+
</ul>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<div class="slide" id="s5">
145+
<span class="slide-number">5 / 12</span>
146+
<h2>Advanced Features</h2>
147+
<div class="grid">
148+
<div class="card">
149+
<h3>speculative-simple/</h3>
150+
<p>Simplified speculative decoding example showing the draft-verify paradigm</p>
151+
</div>
152+
<div class="card">
153+
<h3>lookahead/</h3>
154+
<p>Lookahead decoding implementation for accelerated generation</p>
155+
</div>
156+
<div class="card">
157+
<h3>save-load-state/</h3>
158+
<p>Checkpoint and resume inference sessions, save partial results</p>
159+
</div>
160+
<div class="card">
161+
<h3>eval-callback/</h3>
162+
<p>Custom evaluation callbacks for progress monitoring and control</p>
163+
</div>
164+
</div>
165+
</div>
166+
167+
<div class="slide" id="s6">
168+
<span class="slide-number">6 / 12</span>
169+
<h2>Grammar & JSON Generation</h2>
170+
<div class="two-col">
171+
<div>
172+
<div class="card">
173+
<h3>json_schema_to_grammar.py</h3>
174+
<p>Convert JSON Schema to GGML grammar format for structured output</p>
175+
<p style="margin-top: 10px;"><code>JSON Schema → Grammar</code></p>
176+
</div>
177+
<div class="card" style="margin-top: 20px;">
178+
<h3>pydantic_models_to_grammar.py</h3>
179+
<p>Direct conversion from Python Pydantic models to grammars</p>
180+
</div>
181+
</div>
182+
<div>
183+
<div class="card">
184+
<h3>regex_to_grammar.py</h3>
185+
<p>Transform regex patterns into llama.cpp grammar format for constrained generation</p>
186+
</div>
187+
<div class="card" style="margin-top: 20px;">
188+
<h3>pydantic_models_to_grammar_examples.py</h3>
189+
<p>Usage examples demonstrating Pydantic-to-grammar conversion</p>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
195+
<div class="slide" id="s7">
196+
<span class="slide-number">7 / 12</span>
197+
<h2>Model Conversion Tools</h2>
198+
<div class="grid">
199+
<div class="card">
200+
<h3>convert_legacy_llama.py</h3>
201+
<p>Convert legacy LLaMA model formats to GGUF format</p>
202+
</div>
203+
<div class="card">
204+
<h3>model-conversion/</h3>
205+
<p>Comprehensive model conversion utilities for various formats</p>
206+
</div>
207+
<div class="card">
208+
<h3>convert-llama2c-to-ggml/</h3>
209+
<p>LLaMA2C to GGML format converter</p>
210+
</div>
211+
<div class="card">
212+
<h3>gguf/</h3>
213+
<p>GGUF format utilities and tools</p>
214+
</div>
215+
</div>
216+
</div>
217+
218+
<div class="slide" id="s8">
219+
<span class="slide-number">8 / 12</span>
220+
<h2>Platform-Specific Examples</h2>
221+
<div class="grid">
222+
<div class="card">
223+
<h3>llama.swiftui/</h3>
224+
<p>Native iOS/macOS application using SwiftUI</p>
225+
<div>
226+
<span class="tag tag-platform">Apple</span>
227+
<span class="tag tag-lang">Swift</span>
228+
</div>
229+
</div>
230+
<div class="card">
231+
<h3>batched.swift/</h3>
232+
<p>Swift version of batch inference</p>
233+
<div>
234+
<span class="tag tag-platform">Apple</span>
235+
</div>
236+
</div>
237+
<div class="card">
238+
<h3>llama.android/</h3>
239+
<p>Native Android application</p>
240+
<div>
241+
<span class="tag tag-platform">Android</span>
242+
<span class="tag tag-lang">Kotlin</span>
243+
</div>
244+
</div>
245+
<div class="card">
246+
<h3>sycl/</h3>
247+
<p>SYCL implementation for GPU acceleration</p>
248+
<div>
249+
<span class="tag tag-platform">GPU</span>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
255+
<div class="slide" id="s9">
256+
<span class="slide-number">9 / 12</span>
257+
<h2>Server & Deployment</h2>
258+
<div class="grid">
259+
<div class="card">
260+
<h3>server_embd.py</h3>
261+
<p>Embedding server implementation in Python</p>
262+
</div>
263+
<div class="card">
264+
<h3>server-llama2-13B.sh</h3>
265+
<p>Quick start script for running LLaMA2-13B server</p>
266+
</div>
267+
<div class="card">
268+
<h3>simple-chat/</h3>
269+
<p>Simple chat interface example</p>
270+
</div>
271+
<div class="card">
272+
<h3>idle/</h3>
273+
<p>Idle connection handling example</p>
274+
</div>
275+
</div>
276+
</div>
277+
278+
<div class="slide" id="s10">
279+
<span class="slide-number">10 / 12</span>
280+
<h2>Utilities & Helpers</h2>
281+
<div class="grid">
282+
<div class="card">
283+
<h3>gguf-hash/</h3>
284+
<p>GGUF file hashing and verification tools</p>
285+
</div>
286+
<div class="card">
287+
<h3>debug/</h3>
288+
<p>Debugging utilities and tools</p>
289+
</div>
290+
<div class="card">
291+
<h3>gen-docs/</h3>
292+
<p>Automatic documentation generation</p>
293+
</div>
294+
<div class="card">
295+
<h3>deprecation-warning/</h3>
296+
<p>Example of handling deprecation warnings</p>
297+
</div>
298+
</div>
299+
</div>
300+
301+
<div class="slide" id="s11">
302+
<span class="slide-number">11 / 12</span>
303+
<h2>Use Case Flow</h2>
304+
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
305+
<div class="flow">
306+
<div class="flow-item">
307+
<strong>Model Loading</strong><br>
308+
<small>GGUF format</small>
309+
</div>
310+
<div class="flow-arrow">→</div>
311+
<div class="flow-item">
312+
<strong>Tokenization</strong><br>
313+
<small>Input processing</small>
314+
</div>
315+
<div class="flow-arrow">→</div>
316+
<div class="flow-item">
317+
<strong>Inference</strong><br>
318+
<small>LLM forward pass</small>
319+
</div>
320+
<div class="flow-arrow">→</div>
321+
<div class="flow-item">
322+
<strong>Generation</strong><br>
323+
<small>Token sampling</small>
324+
</div>
325+
</div>
326+
<div style="text-align: center; margin-top: 40px;">
327+
<h3 style="color: #f64f59; margin-bottom: 20px;">Additional Capabilities</h3>
328+
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
329+
<span class="tag tag-feature">Batch Processing</span>
330+
<span class="tag tag-feature">Speculative Decoding</span>
331+
<span class="tag tag-feature">Grammar Constraints</span>
332+
<span class="tag tag-feature">Embedding Generation</span>
333+
<span class="tag tag-feature">RAG Integration</span>
334+
<span class="tag tag-feature">State Persistence</span>
335+
</div>
336+
</div>
337+
</div>
338+
</div>
339+
340+
<div class="slide" id="s12">
341+
<span class="slide-number">12 / 12</span>
342+
<h2>Summary</h2>
343+
<div class="grid">
344+
<div class="card">
345+
<h3>Getting Started</h3>
346+
<p>Start with <code>simple/</code> for basic usage, then explore <code>batched/</code> for performance</p>
347+
</div>
348+
<div class="card">
349+
<h3>Structured Output</h3>
350+
<p>Use grammar tools for JSON/schema-constrained generation</p>
351+
</div>
352+
<div class="card">
353+
<h3>Production</h3>
354+
<p>Check server examples and parallel processing for deployment</p>
355+
</div>
356+
<div class="card">
357+
<h3>Mobile</h3>
358+
<p>SwiftUI and Android examples for native app integration</p>
359+
</div>
360+
</div>
361+
<div style="margin-top: 40px; text-align: center; color: #666;">
362+
<p>github.com/ggml-org/llama.cpp</p>
363+
</div>
364+
</div>
365+
366+
<script>
367+
let currentSlide = 0;
368+
const slides = document.querySelectorAll('.slide');
369+
370+
document.addEventListener('keydown', (e) => {
371+
if (e.key === 'ArrowRight' || e.key === ' ') {
372+
e.preventDefault();
373+
currentSlide = Math.min(currentSlide + 1, slides.length - 1);
374+
slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
375+
} else if (e.key === 'ArrowLeft') {
376+
e.preventDefault();
377+
currentSlide = Math.max(currentSlide - 1, 0);
378+
slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
379+
}
380+
});
381+
382+
window.addEventListener('scroll', () => {
383+
const scrollPos = window.scrollY;
384+
slides.forEach((slide, i) => {
385+
if (slide.offsetTop <= scrollPos + 100) {
386+
currentSlide = i;
387+
}
388+
});
389+
});
390+
</script>
391+
392+
</body>
393+
</html>

0 commit comments

Comments
 (0)