Admin Console¶
Tech Stack¶
| Technology | Version | Purpose |
|---|---|---|
| Astro | 6.1 | Static site framework with ViewTransitions |
| Svelte | 5.55 | Interactive component framework (runes syntax) |
| Tailwind CSS | 4.0 | Utility-first styling (CSS-first config) |
| TypeScript | 6.0 | Type safety |
| Node.js | 24 LTS | Runtime |
Architecture¶
The admin console is a statically-generated SPA:
- Astro renders page shells at build time
- Svelte components hydrate client-side (client:load)
- Astro ViewTransitions provides SPA-like navigation without full page reloads
- All data fetched client-side from the Face API
Pages¶
Dashboard (/)¶
Component: Dashboard.svelte
Displays: - API health status and model info - Total images, jobs, faces detected, avg inference time - Jobs by type breakdown - Jobs by blur method breakdown - Total storage used
Images (/images)¶
Component: ImageGrid.svelte
Features: - 3-column grid with thumbnails from S3 presigned URLs - Image metadata (dimensions, size, job count, date) - Delete button with confirmation - Pagination
Jobs (/jobs)¶
Component: JobTable.svelte
Features: - Tabular view of all processing jobs - Filter by type (all / detect / mask) - Columns: ID, type, faces, method, inference time, total time, date - Link to view processed images - Pagination
Test (/test)¶
Component: FaceTester.svelte
Features: - Drag-and-drop image upload - Adjustable parameters: confidence, blur method, strength, padding - Side-by-side original and masked result - Detection metadata display (face count, timing, bounding boxes) - Full JSON detection output
API Client¶
src/lib/api.ts provides a typed API client:
import { api } from "../lib/api";
// Health check
const health = await api.health();
// Stats
const stats = await api.stats();
// Images CRUD
const images = await api.listImages(page, perPage);
await api.deleteImage(id);
// Jobs
const jobs = await api.listJobs(page, perPage, "mask");
// Detection / Masking
const detectResult = await api.detect(file, 0.5);
const maskResult = await api.mask(file, { method: "gaussian", strength: 99 });
Configuration¶
| Variable | Default | Description |
|---|---|---|
PUBLIC_API_URL |
http://localhost:8000 |
Face API base URL |
Set via environment variable or .env file.
Styling¶
Dark theme with CSS custom properties:
- --color-bg: #0f1117 (page background)
- --color-surface: #1a1d27 (card background)
- --color-border: #2a2d3a (borders)
- --color-primary: #6366f1 (indigo accent)
- --color-success: #22c55e (green status)
- --color-danger: #ef4444 (red/delete)