Skip to content

Commit b81067e

Browse files
twitwitwitwi
committed
Componentizing gallery
1 parent 497e639 commit b81067e

File tree

2 files changed

+48
-109
lines changed

2 files changed

+48
-109
lines changed

‎src/components/TypicalGallery.astro‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
3+
const { data, caption } = Astro.props;
4+
5+
---
6+
7+
8+
<figure>
9+
<div style={{
10+
display: "grid",
11+
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
12+
gap: "1rem",
13+
alignItems: "start"
14+
}}>
15+
{data.map((cat, idx) => (
16+
<figure key={idx} style={{ margin: 0 }}> {/* remove default margin */}
17+
<img
18+
src={cat.url}
19+
alt={cat.alt}
20+
style={{ width: "100%", height: "auto", objectFit: "cover", display: "block" }}
21+
/>
22+
<figcaption style={{
23+
textAlign: "center",
24+
fontSize: "0.85rem",
25+
color: "#6b7280",
26+
margin: 0, // remove figcaption margin
27+
marginTop: "0.25rem" // optional small spacing
28+
}}>
29+
{cat.caption}
30+
</figcaption>
31+
</figure>
32+
))}
33+
</div>
34+
35+
<figcaption style={{
36+
textAlign: "center",
37+
marginTop: "1rem",
38+
fontStyle: "italic",
39+
color: "#6b7280"
40+
}}>
41+
{caption}
42+
</figcaption>
43+
</figure>

‎src/content/lessons/introduction.mdx‎

Lines changed: 5 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ heroImage: '../../assets/blog-placeholder-3.jpg'
66
---
77

88
import T from '../../components/TypstMath.astro'
9+
import TypicalGallery from '../../components/TypicalGallery.astro'
910

1011

1112
### Introduction
@@ -22,7 +23,6 @@ The goal of this Lecture is to understand the relationship between vanilla uncon
2223

2324
<T block v='text("Data: ") underbrace({x_1, x_2, x_3,dots, x_n}, n "observations") in bb(R)^d .' />
2425

25-
2626
export const catGallery = [
2727
{
2828
url: "https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&w=800",
@@ -56,42 +56,7 @@ export const catGallery = [
5656
}
5757
]
5858

59-
<figure>
60-
<div style={{
61-
display: "grid",
62-
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
63-
gap: "1rem",
64-
alignItems: "start"
65-
}}>
66-
{catGallery.map((cat, idx) => (
67-
<figure key={idx} style={{ margin: 0 }}> {/* remove default margin */}
68-
<img
69-
src={cat.url}
70-
alt={cat.alt}
71-
style={{ width: "100%", height: "auto", objectFit: "cover", display: "block" }}
72-
/>
73-
<figcaption style={{
74-
textAlign: "center",
75-
fontSize: "0.85rem",
76-
color: "#6b7280",
77-
margin: 0, // remove figcaption margin
78-
marginTop: "0.25rem" // optional small spacing
79-
}}>
80-
{cat.caption}
81-
</figcaption>
82-
</figure>
83-
))}
84-
</div>
85-
86-
<figcaption style={{
87-
textAlign: "center",
88-
marginTop: "1rem",
89-
fontStyle: "italic",
90-
color: "#6b7280"
91-
}}>
92-
A dataset of cat photos (source, Pexels.com).
93-
</figcaption>
94-
</figure>
59+
<TypicalGallery data={catGallery} caption="A dataset of cat photos (source, Pexels.com)." />
9560

9661

9762

@@ -145,42 +110,8 @@ export const catDogGallery = [
145110
}
146111
]
147112

148-
<figure>
149-
<div style={{
150-
display: "grid",
151-
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
152-
gap: "1rem",
153-
alignItems: "start"
154-
}}>
155-
{catDogGallery.map((cat, idx) => (
156-
<figure key={idx} style={{ margin: 0 }}> {/* remove default margin */}
157-
<img
158-
src={cat.url}
159-
alt={cat.alt}
160-
style={{ width: "100%", height: "auto", objectFit: "cover", display: "block" }}
161-
/>
162-
<figcaption style={{
163-
textAlign: "center",
164-
fontSize: "0.85rem",
165-
color: "#6b7280",
166-
margin: 0, // remove figcaption margin
167-
marginTop: "0.25rem" // optional small spacing
168-
}}>
169-
{cat.caption}
170-
</figcaption>
171-
</figure>
172-
))}
173-
</div>
174-
175-
<figcaption style={{
176-
textAlign: "center",
177-
marginTop: "1rem",
178-
fontStyle: "italic",
179-
color: "#6b7280"
180-
}}>
181-
A labelled dataset of cat and dog photos (source, Pexels.com).
182-
</figcaption>
183-
</figure>
113+
<TypicalGallery data={catDogGallery} caption="A labelled dataset of cat and dog photos (source, Pexels.com)." />
114+
184115

185116

186117
**Assumption** For *class-conditional* generative models, the assumption is that the data $x_1, \dots, x_n$, is drawn from some *unknown* underlying conditional probability distribution**s** $p_{data}( \cdot | y = y_i)$: for all $i \in 1, \dots, n$
@@ -240,42 +171,7 @@ export const catDogTextGallery = [
240171
}
241172
]
242173

243-
<figure>
244-
<div style={{
245-
display: "grid",
246-
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
247-
gap: "1rem",
248-
alignItems: "start"
249-
}}>
250-
{catDogTextGallery.map((cat, idx) => (
251-
<figure key={idx} style={{ margin: 0 }}> {/* remove default margin */}
252-
<img
253-
src={cat.url}
254-
alt={cat.alt}
255-
style={{ width: "100%", height: "auto", objectFit: "cover", display: "block" }}
256-
/>
257-
<figcaption style={{
258-
textAlign: "center",
259-
fontSize: "0.85rem",
260-
color: "#6b7280",
261-
margin: 0, // remove figcaption margin
262-
marginTop: "0.25rem" // optional small spacing
263-
}}>
264-
{cat.caption}
265-
</figcaption>
266-
</figure>
267-
))}
268-
</div>
269-
270-
<figcaption style={{
271-
textAlign: "center",
272-
marginTop: "1rem",
273-
fontStyle: "italic",
274-
color: "#6b7280"
275-
}}>
276-
A dataset of cat and dog photos, and their text description (source, Pexels.com).
277-
</figcaption>
278-
</figure>
174+
<TypicalGallery data={catDogTextGallery} caption="A dataset of cat and dog photos, and their text description (source, Pexels.com)." />
279175

280176

281177
For instance, [Stable Diffusion](https://stabledifffusion.com/) was trained on the [LAION-5B dataset](https://laion.ai/blog/laion-5b/), a dataset of 5 billion images and their textual description.

0 commit comments

Comments
 (0)