Skip to content

Commit 14687c4

Browse files
pablogsalpablogsal
committed
Fix admin API routes and image aspect ratios
- Update admin endpoints to use /api/admin prefix - Add style={{ height: "auto" }} to memray logo images to maintain aspect ratio
1 parent 55652b6 commit 14687c4

File tree

3 files changed

+473
-43
lines changed

3 files changed

+473
-43
lines changed

‎frontend/src/app/about/page.tsx‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
'use client';
2+
3+
import { Code2, Users, Zap, Database, GitBranch, BarChart3, HelpCircle, Key, Settings, Package, MessageSquare, ChevronDown } from 'lucide-react';
4+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
5+
import {
6+
Collapsible,
7+
CollapsibleContent,
8+
CollapsibleTrigger,
9+
} from '@/components/ui/collapsible';
10+
import Image from 'next/image';
11+
import Link from 'next/link';
12+
import { useState } from 'react';
13+
14+
interface FAQItem {
15+
question: string;
16+
answer: string;
17+
icon?: React.ElementType;
18+
}
19+
20+
export default function AboutPage() {
21+
const [openFAQ, setOpenFAQ] = useState<string | null>(null);
22+
23+
const faqItems: FAQItem[] = [
24+
{
25+
question: "How do I get an API token?",
26+
answer: "API tokens are managed by the project maintainers. Please contact one of the maintainers listed below via GitHub or email. Include your GitHub username and a brief description of what you'll be using the token for (e.g., running benchmarks on a specific fork, CI integration, etc.).",
27+
icon: Key,
28+
},
29+
{
30+
question: "How do I create a new environment?",
31+
answer: "Environments represent different hardware/OS combinations where benchmarks run. To add a new environment, contact the maintainers with details about your system (OS, CPU architecture, memory, etc.). They will create the environment configuration for you.",
32+
icon: Settings,
33+
},
34+
{
35+
question: "How do I add a new binary configuration?",
36+
answer: "Binary configurations represent different CPython build flags (e.g., --enable-optimizations, --with-lto). To add a new configuration, open a GitHub issue or contact the maintainers with the specific build flags you want to test.",
37+
icon: Package,
38+
},
39+
{
40+
question: "Why is my benchmark data not showing up?",
41+
answer: "There could be several reasons: 1) The benchmark worker might still be processing your commits, 2) There might be an issue with your API token permissions, 3) The specified binary/environment combination might not exist. Check the worker logs or contact the maintainers for help.",
42+
icon: HelpCircle,
43+
},
44+
{
45+
question: "How often are benchmarks run?",
46+
answer: "Benchmarks are automatically run for each commit to the main CPython repository by community members running worker processes. Anyone with an API token can run additional benchmarks on feature branches or custom commits using the worker tool.",
47+
icon: BarChart3,
48+
},
49+
{
50+
question: "Can I run benchmarks on my own fork?",
51+
answer: "Yes! Anyone can run the memory-tracker worker tool with an API token to benchmark any CPython fork or branch. The worker tool is open source and designed to be run by community members. See the worker documentation for setup instructions.",
52+
icon: GitBranch,
53+
},
54+
];
55+
return (
56+
<div className="container py-12 max-w-6xl">
57+
{/* Hero Section */}
58+
<div className="text-center mb-16 relative">
59+
<div className="absolute inset-0 -z-10">
60+
<div className="absolute top-20 left-1/4 w-32 h-32 bg-primary/5 rounded-full blur-xl animate-pulse"></div>
61+
<div className="absolute top-32 right-1/3 w-24 h-24 bg-secondary/10 rounded-full blur-lg animate-pulse delay-1000"></div>
62+
</div>
63+
<div className="relative">
64+
<Code2 className="h-20 w-20 text-primary mx-auto mb-6" />
65+
<h1 className="text-5xl font-bold font-headline mb-6">
66+
CPython Memory Insights
67+
</h1>
68+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
69+
Memory profiling infrastructure for CPython core development
70+
</p>
71+
</div>
72+
</div>
73+
74+
{/* How It Works - Expanded Section */}
75+
<div className="mb-16">
76+
<h2 className="text-4xl font-bold font-headline text-center mb-12">
77+
How Memory Insights Works
78+
</h2>
79+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
80+
{/* Step 1 */}
81+
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
82+
<CardHeader>
83+
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors group-hover:scale-110 duration-300">
84+
<span className="text-2xl font-bold text-primary">1</span>
85+
</div>
86+
<CardTitle className="group-hover:text-primary transition-colors">Commit Detection</CardTitle>
87+
</CardHeader>
88+
<CardContent>
89+
<p className="text-muted-foreground">
90+
Community members running worker processes monitor the CPython repository for new commits.
91+
When a commit is pushed, workers can queue it for memory profiling across
92+
multiple configurations and environments.
93+
</p>
94+
</CardContent>
95+
</Card>
96+
97+
{/* Step 2 */}
98+
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
99+
<CardHeader>
100+
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors group-hover:scale-110 duration-300">
101+
<span className="text-2xl font-bold text-primary">2</span>
102+
</div>
103+
<CardTitle className="group-hover:text-primary transition-colors">Benchmark Execution</CardTitle>
104+
</CardHeader>
105+
<CardContent>
106+
<p className="text-muted-foreground">
107+
Worker processes (which anyone can run with an API token) compile CPython with various
108+
optimization flags, then run a comprehensive suite of memory benchmarks using Memray.
109+
Each benchmark captures detailed allocation data, call stacks, and memory usage patterns.
110+
</p>
111+
</CardContent>
112+
</Card>
113+
114+
{/* Step 3 */}
115+
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
116+
<CardHeader>
117+
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors group-hover:scale-110 duration-300">
118+
<span className="text-2xl font-bold text-primary">3</span>
119+
</div>
120+
<CardTitle className="group-hover:text-primary transition-colors">Analysis & Visualization</CardTitle>
121+
</CardHeader>
122+
<CardContent>
123+
<p className="text-muted-foreground">
124+
Results are processed and stored with rich metadata. The web interface provides
125+
interactive visualizations, trend analysis, and detailed flamegraphs to help
126+
developers understand memory behavior and identify regressions.
127+
</p>
128+
</CardContent>
129+
</Card>
130+
</div>
131+
132+
{/* What you can do with this */}
133+
<h3 className="text-2xl font-bold mb-8 text-center">What you can do with this</h3>
134+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
135+
<Card className="group hover:shadow-xl transition-all duration-500 hover:-translate-y-2 hover:rotate-1 border-l-4 border-l-primary/30 hover:border-l-primary">
136+
<CardHeader>
137+
<BarChart3 className="h-8 w-8 text-primary mb-3 group-hover:scale-125 transition-transform duration-300" />
138+
<CardTitle className="group-hover:text-primary transition-colors">Continuous Memory Monitoring</CardTitle>
139+
</CardHeader>
140+
<CardContent>
141+
<p className="text-muted-foreground">
142+
CPython commits are profiled by community workers across multiple build configurations.
143+
Track memory usage trends over time, identify sudden regressions, and validate that
144+
memory optimizations are working as expected.
145+
</p>
146+
</CardContent>
147+
</Card>
148+
149+
<Card className="group hover:shadow-xl transition-all duration-500 hover:-translate-y-2 hover:-rotate-1 border-l-4 border-l-primary/30 hover:border-l-primary">
150+
<CardHeader>
151+
<GitBranch className="h-8 w-8 text-primary mb-3 group-hover:scale-125 transition-transform duration-300" />
152+
<CardTitle className="group-hover:text-primary transition-colors">Multi-Configuration Analysis</CardTitle>
153+
</CardHeader>
154+
<CardContent>
155+
<p className="text-muted-foreground">
156+
Compare memory usage across different build flags (--enable-optimizations, --with-lto,
157+
debug builds), Python versions, and hardware environments. Understand how different
158+
configurations affect memory consumption.
159+
</p>
160+
</CardContent>
161+
</Card>
162+
163+
<Card className="group hover:shadow-xl transition-all duration-500 hover:-translate-y-2 hover:rotate-1 border-l-4 border-l-primary/30 hover:border-l-primary">
164+
<CardHeader>
165+
<Zap className="h-8 w-8 text-primary mb-3 group-hover:scale-125 transition-transform duration-300" />
166+
<CardTitle className="group-hover:text-primary transition-colors">Interactive Memory Flamegraphs</CardTitle>
167+
</CardHeader>
168+
<CardContent>
169+
<p className="text-muted-foreground">
170+
Powered by Memray's flamegraph generation, explore exactly where memory is allocated
171+
in the CPython codebase. Click through call stacks, zoom into specific functions,
172+
and identify memory hotspots.
173+
</p>
174+
</CardContent>
175+
</Card>
176+
177+
<Card className="group hover:shadow-xl transition-all duration-500 hover:-translate-y-2 hover:-rotate-1 border-l-4 border-l-primary/30 hover:border-l-primary">
178+
<CardHeader>
179+
<Database className="h-8 w-8 text-primary mb-3 group-hover:scale-125 transition-transform duration-300" />
180+
<CardTitle className="group-hover:text-primary transition-colors">Historical Data Archive</CardTitle>
181+
</CardHeader>
182+
<CardContent>
183+
<p className="text-muted-foreground">
184+
Access memory profiling data for any commit in CPython's history. Compare commits
185+
across weeks, months, or years to understand long-term memory usage trends and
186+
validate that optimizations have lasting impact.
187+
</p>
188+
</CardContent>
189+
</Card>
190+
</div>
191+
</div>
192+
193+
{/* Powered by Memray Section */}
194+
<Card className="mb-12 border-primary/20 bg-primary/5 hover:shadow-2xl transition-all duration-700 relative overflow-hidden group">
195+
{/* Anime-style spinning background elements */}
196+
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700">
197+
<div className="absolute top-4 left-4 w-16 h-16 border-2 border-pink-400/30 rounded-full animate-spin" style={{animationDuration: '4s'}}></div>
198+
<div className="absolute top-8 right-8 w-12 h-12 border-2 border-cyan-400/30 rounded-full animate-spin" style={{animationDuration: '3s', animationDirection: 'reverse'}}></div>
199+
<div className="absolute bottom-6 left-12 w-20 h-20 border-2 border-purple-400/30 rounded-full animate-spin" style={{animationDuration: '5s'}}></div>
200+
<div className="absolute bottom-12 right-6 w-8 h-8 border-2 border-yellow-400/30 rounded-full animate-spin" style={{animationDuration: '2s', animationDirection: 'reverse'}}></div>
201+
202+
{/* Glowing orbs */}
203+
<div className="absolute top-1/3 left-1/4 w-4 h-4 bg-pink-500/50 rounded-full blur-sm animate-pulse"></div>
204+
<div className="absolute top-2/3 right-1/3 w-6 h-6 bg-cyan-500/50 rounded-full blur-sm animate-pulse delay-500"></div>
205+
<div className="absolute bottom-1/3 left-1/3 w-3 h-3 bg-purple-500/50 rounded-full blur-sm animate-pulse delay-1000"></div>
206+
207+
{/* Animated gradient overlay */}
208+
<div className="absolute inset-0 bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-cyan-500/10 animate-pulse"></div>
209+
</div>
210+
211+
<CardHeader className="text-center relative z-10">
212+
<CardTitle className="text-3xl font-headline mb-6 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-pink-500 group-hover:via-purple-500 group-hover:to-cyan-500 transition-all duration-700">
213+
Powered by Memray
214+
</CardTitle>
215+
<Link
216+
href="https://bloomberg.github.io/memray/"
217+
target="_blank"
218+
rel="noopener noreferrer"
219+
className="inline-block group/logo"
220+
>
221+
<div className="relative">
222+
<div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-cyan-500 rounded-lg blur-lg opacity-0 group-hover:opacity-75 transition-opacity duration-700 group-hover:animate-pulse"></div>
223+
<Image
224+
src="/memray-logo.png"
225+
alt="Memray - Memory profiler for Python"
226+
width={300}
227+
height={90}
228+
style={{ height: "auto" }}
229+
className="mx-auto opacity-90 group-hover:opacity-100 relative z-10 group-hover:drop-shadow-[0_0_30px_rgba(236,72,153,0.6)] transition-all duration-700"
230+
/>
231+
</div>
232+
</Link>
233+
</CardHeader>
234+
<CardContent className="prose prose-lg prose-neutral dark:prose-invert max-w-none text-center">
235+
<p>
236+
CPython Memory Insights is built on top of <strong>Memray</strong>, Bloomberg's
237+
powerful memory profiler for Python. Memray provides the core profiling capabilities
238+
that enable tracking memory allocations with minimal overhead and generate
239+
detailed flamegraphs for analysis.
240+
</p>
241+
<p>
242+
<Link
243+
href="https://bloomberg.github.io/memray/"
244+
target="_blank"
245+
rel="noopener noreferrer"
246+
className="text-primary hover:underline"
247+
>
248+
Learn more about Memray →
249+
</Link>
250+
</p>
251+
</CardContent>
252+
</Card>
253+
254+
{/* FAQ Section */}
255+
<Card className="mb-12 hover:shadow-xl transition-all duration-500">
256+
<CardHeader>
257+
<HelpCircle className="h-10 w-10 text-primary mb-4 mx-auto animate-pulse" />
258+
<CardTitle className="text-3xl font-headline text-center">Frequently Asked Questions</CardTitle>
259+
</CardHeader>
260+
<CardContent className="space-y-4">
261+
{faqItems.map((item, index) => (
262+
<Collapsible
263+
key={item.question}
264+
open={openFAQ === item.question}
265+
onOpenChange={() => setOpenFAQ(openFAQ === item.question ? null : item.question)}
266+
>
267+
<CollapsibleTrigger className="flex items-center justify-between w-full p-4 rounded-lg hover:bg-muted hover:shadow-md transition-all duration-300 group hover:-translate-y-0.5">
268+
<div className="flex items-center gap-3 text-left">
269+
{item.icon && <item.icon className="h-5 w-5 text-primary flex-shrink-0 group-hover:scale-110 transition-transform" />}
270+
<span className="font-medium group-hover:text-primary transition-colors">{item.question}</span>
271+
</div>
272+
<ChevronDown className="h-4 w-4 text-muted-foreground group-data-[state=open]:rotate-180 transition-transform duration-300" />
273+
</CollapsibleTrigger>
274+
<CollapsibleContent className="px-4 pb-4">
275+
<div className="pl-8 text-muted-foreground">
276+
{item.answer}
277+
</div>
278+
</CollapsibleContent>
279+
</Collapsible>
280+
))}
281+
</CardContent>
282+
</Card>
283+
284+
{/* Contact Section */}
285+
<Card className="mb-12 border-primary/20 bg-primary/5">
286+
<CardHeader className="text-center">
287+
<Users className="h-12 w-12 text-primary mx-auto mb-4" />
288+
<CardTitle className="text-3xl font-headline">Need Help?</CardTitle>
289+
<CardDescription className="text-lg">
290+
Contact the maintainers for assistance
291+
</CardDescription>
292+
</CardHeader>
293+
<CardContent className="text-center space-y-6">
294+
<p className="text-lg max-w-2xl mx-auto">
295+
The CPython Memory Insights maintainers are here to help with:
296+
</p>
297+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl mx-auto">
298+
<div className="flex flex-col items-center gap-2 p-4 rounded-lg bg-background">
299+
<Key className="h-8 w-8 text-primary" />
300+
<span className="font-medium">API Tokens</span>
301+
</div>
302+
<div className="flex flex-col items-center gap-2 p-4 rounded-lg bg-background">
303+
<Settings className="h-8 w-8 text-primary" />
304+
<span className="font-medium">Environment Setup</span>
305+
</div>
306+
<div className="flex flex-col items-center gap-2 p-4 rounded-lg bg-background">
307+
<MessageSquare className="h-8 w-8 text-primary" />
308+
<span className="font-medium">Technical Issues</span>
309+
</div>
310+
</div>
311+
<div className="pt-4">
312+
<p className="text-muted-foreground mb-6">
313+
Reach out via GitHub or the CPython Discord channel
314+
</p>
315+
<div className="flex flex-wrap gap-4 justify-center">
316+
{/* Pablo's profile */}
317+
<Link
318+
href="https://github.com/pablogsal"
319+
target="_blank"
320+
rel="noopener noreferrer"
321+
className="flex items-center gap-3 px-4 py-2 rounded-lg bg-background hover:bg-muted group"
322+
>
323+
<Image
324+
src="https://github.com/pablogsal.png"
325+
alt="Pablo Galindo Salgado"
326+
width={40}
327+
height={40}
328+
className="rounded-full ring-2 ring-muted group-hover:ring-primary"
329+
/>
330+
<div className="text-left">
331+
<p className="font-medium group-hover:text-primary">Pablo Galindo Salgado</p>
332+
<p className="text-sm text-muted-foreground">@pablogsal</p>
333+
</div>
334+
</Link>
335+
</div>
336+
</div>
337+
</CardContent>
338+
</Card>
339+
</div>
340+
);
341+
}

0 commit comments

Comments
 (0)