Demo UI Guide

After running make demo, open http://localhost:8080 in a browser. This page explains each part of the interface.

Layout

The demo UI has four sections, from top to bottom:

1. Header bar — Shows the project name, live gallery count, and action buttons (Load Demo, Use Demo Face)
2. Pipeline strip — A horizontal visualisation of all active pipeline stages. Each stage shows its name, and lights up green/red as requests flow through
3. Operation panel — The main interaction area: upload an image, select an operation (Search, Verify, Enrol, Delete), and submit
4. Results panel — Shows the response: matched candidates with scores, quality assessments, timing breakdowns, and error messages

First steps after make demo

1. Click Load Demo in the header. This downloads ~20 LFW face photos and enrols them through the full pipeline. Watch the gallery count increase.
2. Click Use Demo Face to select a pre-loaded face image as the probe.
3. Click Search Gallery. The pipeline strip animates as each stage processes the image, and the results panel shows ranked matches with similarity scores.

Operations

Search (1:N)

Upload or select a face image, choose a partition, and click Search. The results show:

• Ranked candidate list with subject IDs and similarity scores
• Quality score of the probe image
• Per-stage timing breakdown (detection, alignment, PAD, quality, extraction, search)
• Model ID used for recognition

Verify (1:1)

Enter a subject ID, upload an image, and click Verify. The result shows match/no-match with the similarity score.

Enrol

Upload a face image, enter a subject ID and partition, and click Enrol. The image passes through the full security pipeline (PAD + MAD + quality) before the template is stored.

Delete

Enter a subject ID and partition, then click Delete. No image is required.

Pipeline strip

The strip shows every active stage in the pipeline. Stages that are not loaded (because the model file is absent) are hidden. When a request is processing, each stage highlights in sequence:

• Grey: waiting
• Green: passed successfully
• Red: rejected (gate failure)
• Blue: currently processing

The strip updates in real time as the request flows through the pipeline.

Interpreting results

Similarity scores

Scores range from 0 to 1. In practice:

• 0.6 — 1.0: Strong match (very likely the same person)
• 0.4 — 0.6: Possible match (review recommended)
• Below 0.4: Unlikely match

These ranges depend on capture conditions. See Configuration Tuning for guidance on threshold selection.

Timing breakdown

The timing section shows milliseconds per stage. Typical values on CPU:

• Detection: 12 — 20 ms
• Alignment: 1 — 2 ms
• PAD: 8 — 12 ms
• Quality: 5 — 10 ms
• Extraction: 15 — 25 ms
• Search: 1 — 3 ms (even at 200M scale)

If any stage is unexpectedly slow, see Troubleshooting.

Capturing screenshots

To capture screenshots for documentation or reporting:

# Start the demo
make demo

# Wait for the API to be healthy
curl --retry 10 --retry-delay 2 http://localhost:8080/health

# Open http://localhost:8080 and use the browser's screenshot tool,
# or use a command-line tool:
# macOS: screencapture -l $(osascript -e 'tell app "Safari" to id of window 1') screenshot.png
# Linux: gnome-screenshot -w -f screenshot.png

Place screenshots in docs-site/src/assets/screenshots/ and reference them in Starlight pages with:

import screenshot from '../../../assets/screenshots/demo-search.png';
<img src={screenshot.src} alt="UFME demo search results" />