Admin Console

Tech Stack

Technology	Version	Purpose
Astro	6.1.1	Static site framework with ViewTransitions
Svelte	5.55.1	Interactive component framework (runes syntax)
Tailwind CSS	4.2.2	Utility-first styling (CSS-first config)
TypeScript	5.9.3	Type safety
Node.js	24 LTS	Runtime

Architecture

The admin console ships as prebuilt static assets, but the runtime container serves protected HTML routes through a small Node server that verifies the admin session with the Face API before returning non-login pages.

• 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
• Browser admin console uses a cookie-backed admin session via /api/v1/admin/auth/login

Pages

Dashboard (/)

Component: Dashboard.svelte

Displays: - Shows API health status, dependency readiness, and model info - Shows total images, jobs, faces detected, and average inference time - Shows jobs by type - Shows jobs by blur method - Shows total storage used

Images (/images)

Component: ImageGrid.svelte

Features: - Shows side-by-side original and latest processed image previews - Shows a placeholder when an image has no processed result yet - Shows image metadata such as dimensions, size, job count, and date - Supports delete with confirmation - Supports pagination - Shows an informative unavailable state instead of a hard failure when storage is disabled

Jobs (/jobs)

Component: JobTable.svelte

Features: - Shows a tabular view of all processing jobs - Supports filtering by type (all / detect / mask) - Shows columns for ID, type, faces, method, inference time, total time, and date - Links to processed images - Supports pagination - Shows an informative unavailable state instead of a hard failure when storage is disabled

API Keys (/keys)

Shows issued API keys when the database-backed mode is available, and shows an informative unavailable state when the database tier is disabled.

Test (/test)

Component: FaceTester.svelte

Features: - Supports drag-and-drop image upload - Supports adjustable parameters for confidence, blur method, strength, and padding - Shows the original image and masked result side by side - Shows detection metadata such as face count, timing, and bounding boxes - Uses the admin-only preview endpoint /api/v1/admin/test/mask

API Client

src/lib/api.ts provides a typed API client:

import { api, login } from "../lib/api";

// Session-backed admin auth
await login("admin", "secret");

// 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");

// Admin preview masking
const preview = await api.previewMask(file, { method: "gaussian", strength: 99 });

using System.Net.Http.Headers;
using System.Text;

using var client = new HttpClient();
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(
    "Basic",
    Convert.ToBase64String(Encoding.ASCII.GetBytes("admin:password"))
);

var statsResponse = await client.GetAsync("https://face-api.xylolabs.com/api/v1/admin/stats");
Console.WriteLine(await statsResponse.Content.ReadAsStringAsync());

using var previewContent = new MultipartFormDataContent();
previewContent.Add(new ByteArrayContent(File.ReadAllBytes("photo.jpg")), "image", "photo.jpg");
var previewResponse = await client.PostAsync(
    "https://face-api.xylolabs.com/api/v1/admin/test/mask?method=gaussian&strength=99",
    previewContent
);
Console.WriteLine(await previewResponse.Content.ReadAsStringAsync());

Configuration

Variable	Default	Description
PUBLIC_API_URL	http://localhost:8000	Build-time browser-facing API base URL used by the hydrated admin client
ADMIN_SESSION_API_URL	PUBLIC_API_URL	Runtime API base used by the Node session-gating server for auth checks

PUBLIC_API_URL is baked into the built frontend at build time. ADMIN_SESSION_API_URL is read at runtime by the Node session-gating server.

In the local Docker Compose stack, PUBLIC_API_URL is explicitly set to http://localhost:8000, while ADMIN_SESSION_API_URL is explicitly set to http://api:8000 so the runtime server talks to the internal API service instead of the browser-facing host URL.

For containerized deployments, pass PUBLIC_API_URL at build time and ADMIN_SESSION_API_URL at runtime.

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)