From 5a6ef5034fb838589ba9d19d35b7389617454b6e Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:17:10 +0000
Subject: [PATCH 1/9] feat(react-ui): add Face & Voice Recognition pages

Expose the face and voice biometrics endpoints
(/v1/face/*, /v1/voice/*) through the React UI. Each page has four
tabs driving the six endpoints per modality: Analyze (demographics
with bounding boxes / waveform segments), Compare (verify with a
match gauge and live threshold slider), Enrollment (register /
identify / forget with a top-K matches view), Embedding (raw
vector inspector with sparkline + copy).

MediaInput supports file upload plus live capture: webcam
snap-to-canvas for face, MediaRecorder -> AudioContext ->
16-bit PCM mono WAV transcode for voice (libsndfile on the
backend only handles WAV/FLAC/OGG natively).

Sidebar gets a new Biometrics section feature-gated on
face_recognition / voice_recognition; routes are wrapped in
<RequireFeature>. No new dependencies -- Font Awesome icons
picked from the Free set.

Assisted-by: Claude:Opus 4.7
---
 core/http/react-ui/src/App.css                | 1260 +++++++++++++++++
 core/http/react-ui/src/components/Sidebar.jsx |   12 +
 .../biometrics/BoundingBoxCanvas.jsx          |   63 +
 .../biometrics/DistributionBars.jsx           |   33 +
 .../biometrics/EmbeddingInspector.jsx         |   89 ++
 .../components/biometrics/EnrollmentList.jsx  |   65 +
 .../src/components/biometrics/MatchGauge.jsx  |   46 +
 .../src/components/biometrics/MediaInput.jsx  |  179 +++
 .../src/components/biometrics/TabSwitch.jsx   |   22 +
 .../components/biometrics/WaveformStrip.jsx   |   99 ++
 .../react-ui/src/hooks/useMediaCapture.js     |  205 +++
 .../react-ui/src/pages/FaceRecognition.jsx    |  602 ++++++++
 .../react-ui/src/pages/VoiceRecognition.jsx   |  543 +++++++
 core/http/react-ui/src/router.jsx             |    6 +
 core/http/react-ui/src/utils/api.js           |   20 +
 core/http/react-ui/src/utils/config.js        |   17 +
 16 files changed, 3261 insertions(+)
 create mode 100644 core/http/react-ui/src/components/biometrics/BoundingBoxCanvas.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/DistributionBars.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/EmbeddingInspector.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/EnrollmentList.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/MatchGauge.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/MediaInput.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/TabSwitch.jsx
 create mode 100644 core/http/react-ui/src/components/biometrics/WaveformStrip.jsx
 create mode 100644 core/http/react-ui/src/hooks/useMediaCapture.js
 create mode 100644 core/http/react-ui/src/pages/FaceRecognition.jsx
 create mode 100644 core/http/react-ui/src/pages/VoiceRecognition.jsx

diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index 03c448243ab8..debb7bca7041 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -4806,6 +4806,1266 @@ select.input {
   justify-content: center;
 }
 
+/* ──────────────────── Biometrics (face + voice recognition) ──────────────────── */
+
+.biometrics-page {
+  padding: var(--spacing-xl);
+  max-width: 1320px;
+  margin: 0 auto;
+  width: 100%;
+  animation: fadeIn var(--duration-normal) var(--ease-default);
+}
+
+.biometrics-page__header {
+  display: grid;
+  grid-template-columns: 1fr minmax(240px, 320px);
+  gap: var(--spacing-lg);
+  align-items: end;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border-divider);
+}
+
+.biometrics-page__header .page-title i {
+  color: var(--color-accent);
+}
+
+.biometrics-page__model {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.biometrics-page__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  min-width: 0;
+}
+
+@media (max-width: 720px) {
+  .biometrics-page__header {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+}
+
+/* Tabs — flat, underlined, inherit page tone */
+.biometrics-tabs {
+  display: flex;
+  gap: var(--spacing-xs);
+  border-bottom: 1px solid var(--color-border-subtle);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.biometrics-tabs::-webkit-scrollbar { display: none; }
+
+.biometrics-tab {
+  background: transparent;
+  border: 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  border-bottom: 2px solid transparent;
+  min-height: 44px;
+  transition: color var(--duration-fast), border-color var(--duration-fast);
+  white-space: nowrap;
+}
+.biometrics-tab:hover { color: var(--color-text-primary); }
+.biometrics-tab.active {
+  color: var(--color-text-primary);
+  border-bottom-color: var(--color-accent);
+}
+.biometrics-tab i { color: var(--color-accent); font-size: 0.9em; }
+
+/* Two-column workflow layout */
+.biometrics-twocol {
+  display: grid;
+  grid-template-columns: minmax(300px, 380px) 1fr;
+  gap: var(--spacing-lg);
+  align-items: start;
+  min-width: 0;
+}
+@media (max-width: 980px) {
+  .biometrics-twocol { grid-template-columns: 1fr; }
+}
+
+.biometrics-panel {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-subtle), var(--shadow-inset-top);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.biometrics-panel__title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.biometrics-panel__title i { color: var(--color-accent); }
+.biometrics-panel__note {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--leading-normal);
+}
+
+.biometrics-results {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.biometrics-empty {
+  background: var(--color-bg-secondary);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-2xl) var(--spacing-lg);
+  text-align: center;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  color: var(--color-text-secondary);
+}
+.biometrics-empty > i {
+  font-size: 2.5rem;
+  color: var(--color-accent);
+  opacity: 0.6;
+}
+.biometrics-empty h3 {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+.biometrics-empty p {
+  margin: 0;
+  max-width: 48ch;
+  line-height: var(--leading-normal);
+  font-size: var(--text-sm);
+}
+
+/* Media input — file / webcam / record switcher */
+.biometrics-mediainput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.biometrics-mediainput__tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  align-self: flex-start;
+}
+.biometrics-mediainput__tab {
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: var(--color-text-secondary);
+  padding: 6px 12px;
+  min-height: 32px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+.biometrics-mediainput__tab:hover:not(:disabled) { color: var(--color-text-primary); }
+.biometrics-mediainput__tab.active {
+  background: var(--color-surface-raised);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-subtle);
+}
+.biometrics-mediainput__tab:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.biometrics-mediainput__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.biometrics-mediainput__live {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.biometrics-mediainput__video {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  object-fit: cover;
+}
+.biometrics-mediainput__controls {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+.biometrics-mediainput__controls .btn { flex: 1; min-height: 40px; }
+
+.biometrics-mediainput__meter {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+.biometrics-mediainput__meter i { color: var(--color-text-muted); }
+.biometrics-mediainput__meter.recording {
+  border-color: var(--color-error-border);
+  color: var(--color-text-primary);
+}
+.biometrics-mediainput__meter.recording i {
+  color: var(--color-error);
+  animation: biometrics-pulse 1.2s ease-in-out infinite;
+}
+@keyframes biometrics-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+.biometrics-mediainput__error {
+  margin: 0;
+  color: var(--color-error);
+  font-size: var(--text-sm);
+}
+
+.biometrics-mediainput__notice {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-warning-light);
+  border: 1px solid var(--color-warning-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+}
+.biometrics-mediainput__notice > i {
+  color: var(--color-warning);
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+.biometrics-mediainput__notice strong {
+  display: block;
+  margin-bottom: 2px;
+}
+.biometrics-mediainput__notice p {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--text-xs);
+}
+.biometrics-mediainput__notice code {
+  background: var(--color-bg-tertiary);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  font-size: 0.95em;
+}
+
+.biometrics-mediainput__preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+}
+.biometrics-mediainput__preview img {
+  width: 100%;
+  max-height: 220px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-sunken);
+}
+.biometrics-mediainput__preview audio { width: 100%; }
+
+.biometrics-mediainput__preview-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+}
+.biometrics-mediainput__source-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.biometrics-mediainput__clear {
+  background: transparent;
+  border: 0;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  min-width: 32px;
+  min-height: 32px;
+  border-radius: var(--radius-sm);
+  transition: color var(--duration-fast), background var(--duration-fast);
+}
+.biometrics-mediainput__clear:hover {
+  color: var(--color-error);
+  background: var(--color-error-light);
+}
+
+/* Fieldsets + chip toggles (attribute actions) */
+.biometrics-fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.biometrics-fieldset legend {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0;
+  margin: 0;
+}
+.biometrics-chipset {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+.biometrics-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
+  min-height: 32px;
+}
+.biometrics-chip input { position: absolute; opacity: 0; pointer-events: none; }
+.biometrics-chip:hover { color: var(--color-text-primary); }
+.biometrics-chip.active {
+  border-color: var(--color-accent-border);
+  background: var(--color-accent-light);
+  color: var(--color-text-primary);
+}
+
+/* Toggle switch */
+.biometrics-switch {
+  display: inline-block;
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+}
+.biometrics-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.biometrics-switch > span {
+  position: absolute;
+  inset: 0;
+  background: var(--color-toggle-off);
+  border-radius: var(--radius-full);
+  transition: background var(--duration-fast);
+  cursor: pointer;
+}
+.biometrics-switch > span::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform var(--duration-fast);
+  box-shadow: var(--shadow-subtle);
+}
+.biometrics-switch input:checked + span { background: var(--color-accent); }
+.biometrics-switch input:checked + span::after { transform: translateX(18px); }
+.biometrics-switch input:focus-visible + span {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Split view for analyze (image + summary side) */
+.biometrics-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr);
+  gap: var(--spacing-md);
+  align-items: start;
+}
+@media (max-width: 980px) {
+  .biometrics-split { grid-template-columns: 1fr; }
+}
+.biometrics-split__media {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.biometrics-split__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  min-width: 0;
+}
+
+/* Bounding box overlay */
+.biometrics-bbox {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  overflow: hidden;
+  line-height: 0;
+}
+.biometrics-bbox img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.biometrics-bbox__box {
+  position: absolute;
+  border: 2px solid var(--color-accent);
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 12px rgba(232, 168, 124, 0.35);
+  pointer-events: none;
+  transition: border-color var(--duration-fast);
+}
+.biometrics-bbox__box.tone-default { border-color: var(--color-border-strong); box-shadow: none; }
+.biometrics-bbox__box.tone-success { border-color: var(--color-success); }
+.biometrics-bbox__box.tone-error   { border-color: var(--color-error); }
+.biometrics-bbox__box.tone-warning { border-color: var(--color-warning); }
+.biometrics-bbox__tag {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  transform: translateY(-100%);
+  background: var(--color-bg-overlay);
+  border: 1px solid var(--color-border-subtle);
+  border-bottom: 0;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  padding: 2px 8px;
+  font-size: var(--text-xs);
+  color: var(--color-text-primary);
+  display: inline-flex;
+  gap: 6px;
+  white-space: nowrap;
+  line-height: var(--leading-snug);
+}
+.biometrics-bbox__tag strong { font-weight: var(--font-weight-semibold); }
+.biometrics-bbox__tag span { color: var(--color-text-secondary); }
+
+.biometrics-facepicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+.biometrics-facepicker__chip {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--color-text-secondary);
+  padding: 4px 12px;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  font-size: var(--text-xs);
+  font: inherit;
+  font-size: var(--text-xs);
+  min-height: 32px;
+  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
+}
+.biometrics-facepicker__chip:hover { color: var(--color-text-primary); }
+.biometrics-facepicker__chip.active {
+  border-color: var(--color-accent-border);
+  background: var(--color-accent-light);
+  color: var(--color-text-primary);
+}
+.biometrics-facepicker__chip small { margin-left: 4px; color: var(--color-text-muted); }
+
+/* Summary card (dominant attributes) */
+.biometrics-summary {
+  padding: var(--spacing-md);
+}
+.biometrics-summary__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+.biometrics-summary__head h3 {
+  font-size: var(--text-base);
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.biometrics-summary__head h3 i { color: var(--color-accent); }
+.biometrics-summary__head h3 small {
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+.biometrics-summary__grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: var(--spacing-md);
+  row-gap: 6px;
+  margin: 0;
+}
+.biometrics-summary__grid dt {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  align-self: center;
+}
+.biometrics-summary__grid dd {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Distribution bars */
+.biometrics-dist {
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.biometrics-dist__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.biometrics-dist__head h3 {
+  font-size: var(--text-sm);
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.005em;
+}
+.biometrics-dist__head i { color: var(--color-accent); }
+.biometrics-dist__dominant {
+  margin-left: auto;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  text-transform: capitalize;
+}
+.biometrics-dist__rows {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.biometrics-dist__row {
+  display: grid;
+  grid-template-columns: minmax(80px, 110px) 1fr max-content;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--text-xs);
+}
+.biometrics-dist__label {
+  color: var(--color-text-secondary);
+  text-transform: capitalize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.biometrics-dist__bar-wrap {
+  height: 6px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+.biometrics-dist__bar {
+  height: 100%;
+  background: var(--color-text-muted);
+  border-radius: var(--radius-full);
+  transition: width var(--duration-normal) var(--ease-default);
+}
+.biometrics-dist__row.dominant .biometrics-dist__label { color: var(--color-text-primary); }
+.biometrics-dist__row.dominant .biometrics-dist__bar { background: var(--color-accent); }
+.biometrics-dist__value {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+}
+.biometrics-dist__row.dominant .biometrics-dist__value { color: var(--color-text-primary); }
+
+/* Pill chips (liveness) */
+.biometrics-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  border: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+}
+.biometrics-pill small {
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.biometrics-pill.good {
+  background: var(--color-success-light);
+  border-color: var(--color-success-border);
+  color: var(--color-success);
+}
+.biometrics-pill.bad {
+  background: var(--color-error-light);
+  border-color: var(--color-error-border);
+  color: var(--color-error);
+}
+.biometrics-pill.muted { color: var(--color-text-muted); }
+
+/* Compare view */
+.biometrics-compare {
+  display: grid;
+  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
+  gap: var(--spacing-md);
+  align-items: stretch;
+}
+@media (max-width: 1080px) {
+  .biometrics-compare { grid-template-columns: 1fr; }
+}
+.biometrics-compare__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.biometrics-compare__label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+}
+.biometrics-compare__center {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+.biometrics-compare__threshold {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+.biometrics-compare__threshold label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+}
+.biometrics-compare__threshold code {
+  color: var(--color-accent);
+  font-variant-numeric: tabular-nums;
+}
+.biometrics-compare__threshold input[type="range"] {
+  width: 100%;
+  accent-color: var(--color-accent);
+}
+.biometrics-compare__hint {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+}
+.biometrics-compare__hint code { color: var(--color-text-secondary); }
+
+/* Match gauge */
+.biometrics-gauge {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  box-shadow: var(--shadow-subtle), var(--shadow-inset-top);
+}
+.biometrics-gauge__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+.biometrics-gauge__verdict {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+}
+.biometrics-gauge.tone-success .biometrics-gauge__verdict { color: var(--color-success); }
+.biometrics-gauge.tone-error .biometrics-gauge__verdict { color: var(--color-error); }
+.biometrics-gauge__confidence {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  line-height: var(--leading-tight);
+}
+.biometrics-gauge__confidence strong {
+  display: block;
+  font-size: var(--text-xl);
+  color: var(--color-text-primary);
+}
+.biometrics-gauge__confidence span {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.biometrics-gauge__track {
+  position: relative;
+  height: 18px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+.biometrics-gauge__zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  transition: width var(--duration-normal) var(--ease-default);
+}
+.biometrics-gauge__zone--match {
+  left: 0;
+  background: var(--color-success-light);
+  border-right: 1px dashed var(--color-success-border);
+}
+.biometrics-gauge__zone--miss {
+  background: var(--color-error-light);
+}
+.biometrics-gauge__threshold {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--color-border-strong);
+  transform: translateX(-1px);
+}
+.biometrics-gauge__threshold span {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 9px;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  letter-spacing: 0.08em;
+  padding: 1px 4px;
+  white-space: nowrap;
+}
+.biometrics-gauge__marker {
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  width: 12px;
+  transform: translateX(-6px);
+  background: var(--color-text-primary);
+  border-radius: 2px;
+  border: 2px solid var(--color-surface-raised);
+  transition: left var(--duration-normal) var(--ease-default);
+  box-shadow: var(--shadow-sm);
+}
+.biometrics-gauge__marker span {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 9px;
+  text-transform: uppercase;
+  color: var(--color-text-primary);
+  letter-spacing: 0.08em;
+  padding-top: 4px;
+  white-space: nowrap;
+}
+.biometrics-gauge__footer {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+.biometrics-gauge__footer em {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-style: normal;
+  margin-right: 4px;
+}
+.biometrics-gauge__footer code {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+}
+
+/* Waveform */
+.biometrics-waveform {
+  --biometrics-wave: var(--color-accent);
+  position: relative;
+  width: 100%;
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.biometrics-waveform--error {
+  padding: var(--spacing-md);
+  color: var(--color-error);
+  font-size: var(--text-sm);
+}
+.biometrics-waveform__segment {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: rgba(232, 168, 124, 0.16);
+  border-left: 1px dashed var(--color-accent-border);
+  border-right: 1px dashed var(--color-accent-border);
+  pointer-events: none;
+}
+.biometrics-waveform__segment.tone-info    { background: var(--color-info-light);    border-color: var(--color-info-border); }
+.biometrics-waveform__segment.tone-success { background: var(--color-success-light); border-color: var(--color-success-border); }
+.biometrics-waveform__segment.tone-warning { background: var(--color-warning-light); border-color: var(--color-warning-border); }
+.biometrics-waveform__segment.tone-accent  { background: var(--color-accent-light);  border-color: var(--color-accent-border); }
+.biometrics-waveform__seglabel {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: var(--text-xs);
+  color: var(--color-text-primary);
+  background: var(--color-bg-overlay);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  max-width: calc(100% - 8px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.biometrics-waveform__duration {
+  position: absolute;
+  right: 8px;
+  bottom: 6px;
+  font-size: 11px;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+  background: var(--color-bg-overlay);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+}
+.biometrics-waveform__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+/* Enrollment layout (register + identify + list) */
+.biometrics-enrollgrid {
+  display: grid;
+  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
+  grid-template-areas:
+    "register identify"
+    "list     list";
+  gap: var(--spacing-lg);
+}
+.biometrics-enrollgrid__register { grid-area: register; }
+.biometrics-enrollgrid__identify { grid-area: identify; }
+.biometrics-enrollgrid__list     { grid-area: list; min-width: 0; }
+@media (max-width: 980px) {
+  .biometrics-enrollgrid {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "register"
+      "identify"
+      "list";
+  }
+}
+.biometrics-enrollgrid__register form,
+.biometrics-enrollgrid__identify form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+.biometrics-enrollgrid__err {
+  margin-top: var(--spacing-sm);
+}
+
+.biometrics-enroll__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-md);
+}
+.biometrics-enroll__count {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  margin-left: var(--spacing-xs);
+}
+
+.biometrics-enroll__grid {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--spacing-md);
+}
+.biometrics-enroll__card {
+  position: relative;
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  transition: border-color var(--duration-fast), transform var(--duration-fast);
+}
+.biometrics-enroll__card:hover {
+  border-color: var(--color-border-default);
+  transform: translateY(-1px);
+}
+.biometrics-enroll__card.highlight {
+  border-color: var(--color-accent-border);
+  box-shadow: 0 0 0 1px var(--color-accent-border);
+  animation: biometrics-highlight 1.4s ease-out;
+}
+@keyframes biometrics-highlight {
+  0% { box-shadow: 0 0 0 4px var(--color-accent-light); }
+  100% { box-shadow: 0 0 0 1px var(--color-accent-border); }
+}
+
+.biometrics-enroll__media {
+  aspect-ratio: 1 / 1;
+  background: var(--color-surface-sunken);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.biometrics-enroll__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.biometrics-enroll__media audio {
+  width: 90%;
+}
+.biometrics-enroll__initials {
+  font-size: 2rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  letter-spacing: 0.04em;
+}
+.biometrics-enroll__body { display: flex; flex-direction: column; gap: 4px; }
+.biometrics-enroll__name {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.biometrics-enroll__labels {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.biometrics-enroll__labels li {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-secondary);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+.biometrics-enroll__labels li span {
+  color: var(--color-text-muted);
+  margin-right: 4px;
+}
+.biometrics-enroll__meta {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.biometrics-enroll__delete {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--color-bg-overlay);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
+}
+.biometrics-enroll__card:hover .biometrics-enroll__delete,
+.biometrics-enroll__card:focus-within .biometrics-enroll__delete { opacity: 1; }
+.biometrics-enroll__delete:hover {
+  color: var(--color-error);
+  background: var(--color-error-light);
+  border-color: var(--color-error-border);
+}
+.biometrics-enroll__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xl);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-lg);
+  text-align: center;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-secondary);
+}
+.biometrics-enroll__empty > i {
+  font-size: 2rem;
+  color: var(--color-accent);
+  opacity: 0.6;
+}
+.biometrics-enroll__empty p {
+  margin: 0;
+  max-width: 44ch;
+  line-height: var(--leading-normal);
+  font-size: var(--text-sm);
+}
+
+/* Matches list (identify results) */
+.biometrics-matches {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+.biometrics-matches__empty {
+  padding: var(--spacing-md);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  text-align: center;
+  font-size: var(--text-sm);
+}
+.biometrics-matches__row {
+  display: grid;
+  grid-template-columns: 32px 56px 1fr;
+  gap: var(--spacing-sm);
+  align-items: center;
+  padding: var(--spacing-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+}
+.biometrics-matches__row.match { border-color: var(--color-success-border); }
+.biometrics-matches__rank {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+}
+.biometrics-matches__avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-surface-sunken);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-sm);
+}
+.biometrics-matches__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.biometrics-matches__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.biometrics-matches__name {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--text-sm);
+  min-width: 0;
+}
+.biometrics-matches__name strong {
+  font-weight: var(--font-weight-semibold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.biometrics-matches__badge {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.biometrics-matches__badge.match {
+  background: var(--color-success-light);
+  color: var(--color-success);
+}
+.biometrics-matches__meter {
+  height: 4px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+.biometrics-matches__fill {
+  height: 100%;
+  background: var(--color-accent);
+  transition: width var(--duration-normal) var(--ease-default);
+}
+.biometrics-matches__row.match .biometrics-matches__fill { background: var(--color-success); }
+.biometrics-matches__meta {
+  display: flex;
+  gap: var(--spacing-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+.biometrics-matches__meta code {
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.biometrics-matches__preview { width: 100%; }
+
+/* Embedding inspector */
+.biometrics-embed {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+}
+.biometrics-embed__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+.biometrics-embed__title {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-semibold);
+}
+.biometrics-embed__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  margin-top: 4px;
+}
+.biometrics-embed__meta strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
+.biometrics-embed__meta code { color: var(--color-text-secondary); }
+
+/* Response details pane */
+.biometrics-response {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.biometrics-response summary {
+  padding: var(--spacing-sm) var(--spacing-md);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  list-style: none;
+  user-select: none;
+  min-height: 40px;
+}
+.biometrics-response summary::-webkit-details-marker { display: none; }
+.biometrics-response summary i { transition: transform var(--duration-fast); }
+.biometrics-response[open] summary i { transform: rotate(90deg); }
+.biometrics-response pre {
+  margin: 0;
+  padding: var(--spacing-md);
+  background: var(--color-surface-sunken);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  overflow-x: auto;
+  max-height: 360px;
+  line-height: var(--leading-snug);
+}
+
+.form-label__hint {
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-regular);
+  margin-left: 4px;
+}
+
 /* Reduced motion accessibility */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
diff --git a/core/http/react-ui/src/components/Sidebar.jsx b/core/http/react-ui/src/components/Sidebar.jsx
index afd289e180d3..340405f813eb 100644
--- a/core/http/react-ui/src/components/Sidebar.jsx
+++ b/core/http/react-ui/src/components/Sidebar.jsx
@@ -24,6 +24,18 @@ const sections = [
       { path: '/app/quantize', icon: 'fas fa-compress', label: 'Quantize (Experimental)', feature: 'quantization' },
     ],
   },
+  {
+    id: 'biometrics',
+    title: 'Biometrics',
+    featureMap: {
+      '/app/face': 'face_recognition',
+      '/app/voice': 'voice_recognition',
+    },
+    items: [
+      { path: '/app/face', icon: 'fas fa-face-smile', label: 'Face Recognition', feature: 'face_recognition' },
+      { path: '/app/voice', icon: 'fas fa-microphone-lines', label: 'Voice Recognition', feature: 'voice_recognition' },
+    ],
+  },
   {
     id: 'agents',
     title: 'Agents',
diff --git a/core/http/react-ui/src/components/biometrics/BoundingBoxCanvas.jsx b/core/http/react-ui/src/components/biometrics/BoundingBoxCanvas.jsx
new file mode 100644
index 000000000000..df72f7e8eaf6
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/BoundingBoxCanvas.jsx
@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react'
+
+// BoundingBoxCanvas — overlay face-detection rectangles on the user-supplied image.
+// boxes: [{ x, y, w, h, label?, sublabel?, tone? }]
+// tone: 'default' | 'success' | 'warning' | 'error' | 'accent'
+export default function BoundingBoxCanvas({ src, boxes = [], alt = '' }) {
+  const wrapRef = useRef(null)
+  const imgRef = useRef(null)
+  const [dims, setDims] = useState({ w: 0, h: 0, natW: 0, natH: 0 })
+
+  useEffect(() => {
+    const update = () => {
+      if (!wrapRef.current || !imgRef.current) return
+      const rect = imgRef.current.getBoundingClientRect()
+      setDims({
+        w: rect.width,
+        h: rect.height,
+        natW: imgRef.current.naturalWidth || 1,
+        natH: imgRef.current.naturalHeight || 1,
+      })
+    }
+    update()
+    const ro = new ResizeObserver(update)
+    if (imgRef.current) ro.observe(imgRef.current)
+    window.addEventListener('resize', update)
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', update)
+    }
+  }, [src])
+
+  const sx = dims.natW ? dims.w / dims.natW : 1
+  const sy = dims.natH ? dims.h / dims.natH : 1
+
+  return (
+    <div ref={wrapRef} className="biometrics-bbox">
+      {src && <img ref={imgRef} src={src} alt={alt} onLoad={(e) => {
+        setDims({
+          w: e.target.getBoundingClientRect().width,
+          h: e.target.getBoundingClientRect().height,
+          natW: e.target.naturalWidth,
+          natH: e.target.naturalHeight,
+        })
+      }} />}
+      {boxes.map((b, i) => (
+        <div key={i} className={`biometrics-bbox__box tone-${b.tone || 'accent'}`}
+          style={{
+            left: `${b.x * sx}px`,
+            top: `${b.y * sy}px`,
+            width: `${b.w * sx}px`,
+            height: `${b.h * sy}px`,
+          }}>
+          {(b.label || b.sublabel) && (
+            <div className="biometrics-bbox__tag">
+              {b.label && <strong>{b.label}</strong>}
+              {b.sublabel && <span>{b.sublabel}</span>}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/biometrics/DistributionBars.jsx b/core/http/react-ui/src/components/biometrics/DistributionBars.jsx
new file mode 100644
index 000000000000..53c95f719734
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/DistributionBars.jsx
@@ -0,0 +1,33 @@
+// DistributionBars — one horizontal bar per label, width proportional to value.
+// distribution: Record<string, number> (values are probabilities 0..1 or any positive scale).
+// dominant: string — highlighted row.
+export default function DistributionBars({ title, distribution, dominant, icon }) {
+  if (!distribution || Object.keys(distribution).length === 0) return null
+  const entries = Object.entries(distribution).sort((a, b) => b[1] - a[1])
+  const max = entries.reduce((m, [, v]) => Math.max(m, v), 0) || 1
+
+  return (
+    <div className="biometrics-dist card">
+      <div className="biometrics-dist__head">
+        {icon && <i className={icon} aria-hidden="true" />}
+        <h3>{title}</h3>
+        {dominant && <span className="biometrics-dist__dominant">{dominant}</span>}
+      </div>
+      <ul className="biometrics-dist__rows">
+        {entries.map(([label, value]) => {
+          const pct = (value / max) * 100
+          const isDominant = label === dominant
+          return (
+            <li key={label} className={`biometrics-dist__row ${isDominant ? 'dominant' : ''}`}>
+              <span className="biometrics-dist__label">{label}</span>
+              <div className="biometrics-dist__bar-wrap" aria-hidden="true">
+                <div className="biometrics-dist__bar" style={{ width: `${pct}%` }} />
+              </div>
+              <span className="biometrics-dist__value">{(value * 100).toFixed(1)}%</span>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/biometrics/EmbeddingInspector.jsx b/core/http/react-ui/src/components/biometrics/EmbeddingInspector.jsx
new file mode 100644
index 000000000000..e94a76e94694
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/EmbeddingInspector.jsx
@@ -0,0 +1,89 @@
+import { useMemo, useRef, useEffect, useState } from 'react'
+
+// EmbeddingInspector — compact visualization of a raw vector returned by /v1/face|voice/embed.
+// embedding: number[] (can be large). dim: int. model: string.
+export default function EmbeddingInspector({ embedding, dim, model, elapsedMs }) {
+  const canvasRef = useRef(null)
+  const [copied, setCopied] = useState(false)
+
+  const summary = useMemo(() => {
+    if (!embedding || !embedding.length) return null
+    let sum = 0, sumSq = 0, min = Infinity, max = -Infinity
+    for (const v of embedding) {
+      sum += v
+      sumSq += v * v
+      if (v < min) min = v
+      if (v > max) max = v
+    }
+    const mean = sum / embedding.length
+    const norm = Math.sqrt(sumSq)
+    return { mean, norm, min, max }
+  }, [embedding])
+
+  useEffect(() => {
+    if (!canvasRef.current || !embedding?.length) return
+    const canvas = canvasRef.current
+    const dpr = window.devicePixelRatio || 1
+    const cssW = canvas.clientWidth
+    const cssH = 60
+    canvas.width = Math.floor(cssW * dpr)
+    canvas.height = Math.floor(cssH * dpr)
+    const ctx = canvas.getContext('2d')
+    ctx.scale(dpr, dpr)
+    ctx.clearRect(0, 0, cssW, cssH)
+
+    const COUNT = Math.min(embedding.length, 128)
+    const values = embedding.slice(0, COUNT)
+    const max = Math.max(...values.map(Math.abs)) || 1
+    const mid = cssH / 2
+    const barW = cssW / COUNT
+    const accent = getComputedStyle(canvas).getPropertyValue('--color-accent').trim() || '#e8a87c'
+    const accentMuted = getComputedStyle(canvas).getPropertyValue('--color-text-muted').trim() || '#6c7084'
+    ctx.strokeStyle = accentMuted
+    ctx.beginPath()
+    ctx.moveTo(0, mid + 0.5)
+    ctx.lineTo(cssW, mid + 0.5)
+    ctx.stroke()
+    ctx.fillStyle = accent
+    for (let i = 0; i < COUNT; i++) {
+      const v = values[i]
+      const h = (Math.abs(v) / max) * (cssH * 0.45)
+      if (v >= 0) ctx.fillRect(i * barW, mid - h, Math.max(0.5, barW - 0.5), h)
+      else ctx.fillRect(i * barW, mid, Math.max(0.5, barW - 0.5), h)
+    }
+  }, [embedding])
+
+  if (!embedding) return null
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(embedding))
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch (_) {
+      /* clipboard gated */
+    }
+  }
+
+  return (
+    <div className="biometrics-embed card">
+      <div className="biometrics-embed__head">
+        <div>
+          <div className="biometrics-embed__title">Embedding vector</div>
+          <div className="biometrics-embed__meta">
+            {dim != null && <span><strong>{dim}</strong> dims</span>}
+            {summary && <span>L2 <strong>{summary.norm.toFixed(3)}</strong></span>}
+            {summary && <span>range <strong>[{summary.min.toFixed(3)}, {summary.max.toFixed(3)}]</strong></span>}
+            {model && <span>model <code>{model}</code></span>}
+            {elapsedMs != null && <span>{elapsedMs.toFixed(0)} ms</span>}
+          </div>
+        </div>
+        <button type="button" className="btn btn-secondary btn-sm" onClick={copy}>
+          <i className={`fas ${copied ? 'fa-check' : 'fa-copy'}`} aria-hidden="true" />
+          {copied ? ' Copied' : ' Copy JSON'}
+        </button>
+      </div>
+      <canvas ref={canvasRef} style={{ width: '100%', height: 60 }} aria-label="Embedding sparkline (first 128 dimensions)" />
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/biometrics/EnrollmentList.jsx b/core/http/react-ui/src/components/biometrics/EnrollmentList.jsx
new file mode 100644
index 000000000000..663af3bdd976
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/EnrollmentList.jsx
@@ -0,0 +1,65 @@
+// EnrollmentList — grid of enrolled subjects (face or voice).
+// entries: [{ id, name, labels?, thumbnail?, registeredAt?, sampleUrl? }]
+// mode: 'image' | 'audio' — controls the card visual.
+export default function EnrollmentList({ entries, onDelete, mode = 'image', highlightId }) {
+  if (!entries || entries.length === 0) {
+    return (
+      <div className="biometrics-enroll__empty">
+        <i className={`fas ${mode === 'image' ? 'fa-user-plus' : 'fa-microphone-lines'}`} aria-hidden="true" />
+        <p>No one enrolled yet. Add a sample using the form on the left to start building your identification store.</p>
+      </div>
+    )
+  }
+
+  return (
+    <ul className="biometrics-enroll__grid" role="list">
+      {entries.map((e) => {
+        const highlight = e.id === highlightId
+        return (
+          <li key={e.id} className={`biometrics-enroll__card ${highlight ? 'highlight' : ''}`}>
+            <div className="biometrics-enroll__media">
+              {mode === 'image' && e.thumbnail
+                ? <img src={e.thumbnail} alt="" />
+                : mode === 'audio' && e.sampleUrl
+                  ? <audio controls src={e.sampleUrl} />
+                  : <div className="biometrics-enroll__initials" aria-hidden="true">{initials(e.name)}</div>}
+            </div>
+            <div className="biometrics-enroll__body">
+              <div className="biometrics-enroll__name">{e.name}</div>
+              {e.labels && Object.keys(e.labels).length > 0 && (
+                <ul className="biometrics-enroll__labels" aria-label="labels">
+                  {Object.entries(e.labels).slice(0, 3).map(([k, v]) => (
+                    <li key={k}><span>{k}</span>{v}</li>
+                  ))}
+                </ul>
+              )}
+              {e.registeredAt && (
+                <div className="biometrics-enroll__meta">
+                  <i className="fas fa-clock" aria-hidden="true" /> {formatTime(e.registeredAt)}
+                </div>
+              )}
+            </div>
+            <button type="button" className="biometrics-enroll__delete" onClick={() => onDelete(e)}
+              aria-label={`Forget ${e.name}`} title="Forget this enrollment">
+              <i className="fas fa-trash" aria-hidden="true" />
+            </button>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+function initials(name) {
+  if (!name) return '?'
+  return name.trim().split(/\s+/).map(p => p[0] || '').join('').slice(0, 2).toUpperCase()
+}
+
+function formatTime(ts) {
+  try {
+    const d = new Date(ts)
+    return d.toLocaleString()
+  } catch (_) {
+    return ts
+  }
+}
diff --git a/core/http/react-ui/src/components/biometrics/MatchGauge.jsx b/core/http/react-ui/src/components/biometrics/MatchGauge.jsx
new file mode 100644
index 000000000000..cf1090afbd11
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/MatchGauge.jsx
@@ -0,0 +1,46 @@
+// MatchGauge — distance vs threshold as a single horizontal meter.
+// distance, threshold numeric (cosine distance, lower = closer).
+// Scale is 0 → max (default 2× threshold or 1.0) so the threshold sits near the middle.
+export default function MatchGauge({ distance, threshold, confidence, verified, label }) {
+  const max = Math.max(1.0, (threshold || 0.3) * 2)
+  const clamp = (v) => Math.max(0, Math.min(max, v))
+  const tPct = (clamp(threshold || 0) / max) * 100
+  const dPct = distance == null ? null : (clamp(distance) / max) * 100
+  const tone = verified ? 'success' : 'error'
+
+  return (
+    <div className={`biometrics-gauge tone-${tone}`} role="img"
+      aria-label={`${label || 'Match'}: ${verified ? 'match' : 'no match'} at distance ${distance?.toFixed?.(3) ?? '?'} (threshold ${threshold?.toFixed?.(3) ?? '?'})`}>
+      <div className="biometrics-gauge__head">
+        <div className="biometrics-gauge__verdict">
+          <i className={`fas ${verified ? 'fa-circle-check' : 'fa-circle-xmark'}`} aria-hidden="true" />
+          <span>{verified ? 'Match' : 'No match'}</span>
+        </div>
+        {confidence != null && (
+          <div className="biometrics-gauge__confidence">
+            <strong>{typeof confidence === 'number' ? confidence.toFixed(1) : confidence}</strong>
+            <span>confidence</span>
+          </div>
+        )}
+      </div>
+      <div className="biometrics-gauge__track" aria-hidden="true">
+        <div className="biometrics-gauge__zone biometrics-gauge__zone--match"
+          style={{ width: `${tPct}%` }} />
+        <div className="biometrics-gauge__zone biometrics-gauge__zone--miss"
+          style={{ left: `${tPct}%`, width: `${100 - tPct}%` }} />
+        <div className="biometrics-gauge__threshold" style={{ left: `${tPct}%` }}>
+          <span>threshold</span>
+        </div>
+        {dPct != null && (
+          <div className="biometrics-gauge__marker" style={{ left: `${dPct}%` }}>
+            <span>distance</span>
+          </div>
+        )}
+      </div>
+      <div className="biometrics-gauge__footer">
+        <span><em>distance</em> <code>{distance?.toFixed?.(4) ?? '—'}</code></span>
+        <span><em>threshold</em> <code>{threshold?.toFixed?.(4) ?? '—'}</code></span>
+      </div>
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/biometrics/MediaInput.jsx b/core/http/react-ui/src/components/biometrics/MediaInput.jsx
new file mode 100644
index 000000000000..475bd8a3ffd0
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/MediaInput.jsx
@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState } from 'react'
+import { useMediaCapture } from '../../hooks/useMediaCapture'
+import { fileToBase64 } from '../../utils/api'
+
+// MediaInput — one control, three ways to supply a sample.
+// mode: 'image' | 'audio'. onChange receives null | { base64, dataUrl, mime, source }.
+function UnsupportedNotice({ mode }) {
+  // Detect the likely cause so we can tell the user what to do, instead of just "not supported".
+  const isSecure = typeof window !== 'undefined' && (window.isSecureContext ?? true)
+  const hostname = typeof window !== 'undefined' ? window.location.hostname : ''
+  const origin = typeof window !== 'undefined' ? window.location.origin : ''
+  const thing = mode === 'image' ? 'webcam' : 'microphone'
+
+  if (!isSecure) {
+    return (
+      <div className="biometrics-mediainput__notice">
+        <i className="fas fa-lock" aria-hidden="true" />
+        <div>
+          <strong>{thing} needs a secure origin</strong>
+          <p>
+            Your browser only exposes <code>getUserMedia</code> over HTTPS, <code>localhost</code>,
+            or <code>127.0.0.1</code>. You're on <code>{origin || hostname}</code>. Reach the UI
+            via <code>http://localhost:&lt;port&gt;</code> (or put a TLS terminator in front) and the
+            live {thing} will light up. Upload still works fine from here.
+          </p>
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div className="biometrics-mediainput__notice">
+      <i className="fas fa-circle-info" aria-hidden="true" />
+      <div>
+        <strong>Live {thing} not available</strong>
+        <p>
+          This browser doesn't expose <code>navigator.mediaDevices.getUserMedia</code>. Try another
+          browser, or use the upload tab — the backend accepts either.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default function MediaInput({ mode, label, value, onChange, idPrefix = 'media' }) {
+  const [tab, setTab] = useState('file') // 'file' | 'live'
+  const fileRef = useRef(null)
+  const cap = useMediaCapture(mode)
+
+  // Release the device when switching away from the live tab.
+  useEffect(() => {
+    if (tab !== 'live' && cap.active) cap.stop()
+  }, [tab]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleFile = async (e) => {
+    const f = e.target.files?.[0]
+    if (!f) { onChange(null); return }
+    const base64 = await fileToBase64(f)
+    const dataUrl = await new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result)
+      reader.readAsDataURL(f)
+    })
+    onChange({ base64, dataUrl, mime: f.type, source: 'file', name: f.name })
+  }
+
+  const handleSnap = () => {
+    const shot = cap.snap()
+    if (shot) onChange({ ...shot, source: 'live' })
+  }
+
+  const handleRecordToggle = async () => {
+    if (cap.recording) {
+      cap.stopRecording()
+    } else {
+      const pending = cap.startRecording()
+      if (!pending) return
+      const result = await pending
+      onChange({ ...result, source: 'live' })
+    }
+  }
+
+  const clear = () => {
+    onChange(null)
+    if (fileRef.current) fileRef.current.value = ''
+  }
+
+  const inputId = `${idPrefix}-${mode}-file`
+
+  return (
+    <div className="biometrics-mediainput">
+      {label && <label className="form-label" htmlFor={inputId}>{label}</label>}
+
+      <div className="biometrics-mediainput__tabs" role="tablist" aria-label={`${label || 'Media'} source`}>
+        <button type="button" role="tab" aria-selected={tab === 'file'}
+          className={`biometrics-mediainput__tab ${tab === 'file' ? 'active' : ''}`}
+          onClick={() => setTab('file')}>
+          <i className="fas fa-upload" aria-hidden="true" /> Upload
+        </button>
+        <button type="button" role="tab" aria-selected={tab === 'live'}
+          className={`biometrics-mediainput__tab ${tab === 'live' ? 'active' : ''}`}
+          onClick={() => setTab('live')}>
+          <i className={`fas ${mode === 'image' ? 'fa-camera' : 'fa-microphone'}`} aria-hidden="true" />
+          {mode === 'image' ? ' Webcam' : ' Record'}
+        </button>
+      </div>
+
+      {tab === 'file' && (
+        <div className="biometrics-mediainput__body">
+          <input
+            ref={fileRef}
+            id={inputId}
+            type="file"
+            className="input"
+            accept={mode === 'image' ? 'image/*' : 'audio/*'}
+            onChange={handleFile}
+          />
+        </div>
+      )}
+
+      {tab === 'live' && (
+        <div className="biometrics-mediainput__body">
+          {!cap.supported && <UnsupportedNotice mode={mode} />}
+          {cap.supported && !cap.active && (
+            <button type="button" className="btn btn-secondary btn-full" onClick={cap.start}>
+              <i className={`fas ${mode === 'image' ? 'fa-camera' : 'fa-microphone'}`} aria-hidden="true" />
+              {mode === 'image' ? ' Start webcam' : ' Enable microphone'}
+            </button>
+          )}
+          {cap.active && mode === 'image' && (
+            <div className="biometrics-mediainput__live">
+              <video ref={cap.videoRef} autoPlay muted playsInline className="biometrics-mediainput__video" />
+              <div className="biometrics-mediainput__controls">
+                <button type="button" className="btn btn-primary" onClick={handleSnap}>
+                  <i className="fas fa-circle-dot" aria-hidden="true" /> Capture
+                </button>
+                <button type="button" className="btn btn-secondary" onClick={cap.stop}>Stop</button>
+              </div>
+            </div>
+          )}
+          {cap.active && mode === 'audio' && (
+            <div className="biometrics-mediainput__live">
+              <div className={`biometrics-mediainput__meter ${cap.recording ? 'recording' : ''}`}>
+                <i className="fas fa-microphone" aria-hidden="true" />
+                <span>{cap.recording ? `Recording… ${cap.elapsed.toFixed(1)}s` : 'Microphone ready'}</span>
+              </div>
+              <div className="biometrics-mediainput__controls">
+                <button type="button" className={`btn ${cap.recording ? 'btn-secondary' : 'btn-primary'}`} onClick={handleRecordToggle}>
+                  <i className={`fas ${cap.recording ? 'fa-stop' : 'fa-circle'}`} aria-hidden="true" />
+                  {cap.recording ? ' Stop' : ' Record'}
+                </button>
+                <button type="button" className="btn btn-secondary" onClick={cap.stop} disabled={cap.recording}>Close</button>
+              </div>
+            </div>
+          )}
+          {cap.error && (
+            <p className="biometrics-mediainput__error" role="alert">{cap.error}</p>
+          )}
+        </div>
+      )}
+
+      {value && (
+        <div className="biometrics-mediainput__preview">
+          {mode === 'image'
+            ? <img src={value.dataUrl} alt="" />
+            : <audio controls src={value.dataUrl} />}
+          <div className="biometrics-mediainput__preview-meta">
+            <span className="biometrics-mediainput__source-pill">
+              <i className={`fas ${value.source === 'live' ? (mode === 'image' ? 'fa-camera' : 'fa-microphone') : 'fa-file'}`} aria-hidden="true" />
+              {value.source === 'live' ? ' Captured' : ` ${value.name || 'Uploaded'}`}
+            </span>
+            <button type="button" className="biometrics-mediainput__clear" onClick={clear} aria-label="Remove sample">
+              <i className="fas fa-xmark" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/biometrics/TabSwitch.jsx b/core/http/react-ui/src/components/biometrics/TabSwitch.jsx
new file mode 100644
index 000000000000..a49d339419cc
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/TabSwitch.jsx
@@ -0,0 +1,22 @@
+export default function TabSwitch({ tabs, value, onChange }) {
+  return (
+    <div className="biometrics-tabs" role="tablist">
+      {tabs.map(t => {
+        const active = t.id === value
+        return (
+          <button
+            key={t.id}
+            role="tab"
+            type="button"
+            aria-selected={active}
+            className={`biometrics-tab ${active ? 'active' : ''}`}
+            onClick={() => onChange(t.id)}
+          >
+            {t.icon && <i className={`${t.icon}`} aria-hidden="true" />}
+            <span>{t.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/biometrics/WaveformStrip.jsx b/core/http/react-ui/src/components/biometrics/WaveformStrip.jsx
new file mode 100644
index 000000000000..ae344f78188e
--- /dev/null
+++ b/core/http/react-ui/src/components/biometrics/WaveformStrip.jsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react'
+
+// WaveformStrip — decode an audio source (data URL or blob URL) via AudioContext,
+// render a mono waveform, and overlay colored segment regions.
+// segments: [{ start: seconds, end: seconds, label?, tone? }]
+export default function WaveformStrip({ src, segments = [], height = 120 }) {
+  const canvasRef = useRef(null)
+  const [duration, setDuration] = useState(0)
+  const [peaks, setPeaks] = useState(null)
+  const [err, setErr] = useState(null)
+
+  useEffect(() => {
+    setPeaks(null)
+    setDuration(0)
+    setErr(null)
+    if (!src) return
+    let cancelled = false
+
+    async function decode() {
+      try {
+        const response = await fetch(src)
+        const buf = await response.arrayBuffer()
+        const Ctx = window.AudioContext || window.webkitAudioContext
+        const ctx = new Ctx()
+        const audioBuf = await ctx.decodeAudioData(buf.slice(0))
+        if (cancelled) { ctx.close(); return }
+        const data = audioBuf.getChannelData(0)
+        const BUCKETS = 480
+        const step = Math.max(1, Math.floor(data.length / BUCKETS))
+        const result = new Float32Array(BUCKETS)
+        for (let i = 0; i < BUCKETS; i++) {
+          let peak = 0
+          const start = i * step
+          const end = Math.min(start + step, data.length)
+          for (let j = start; j < end; j++) {
+            const v = Math.abs(data[j])
+            if (v > peak) peak = v
+          }
+          result[i] = peak
+        }
+        setPeaks(result)
+        setDuration(audioBuf.duration)
+        ctx.close()
+      } catch (e) {
+        if (!cancelled) setErr(e?.message || 'Could not decode audio')
+      }
+    }
+    decode()
+    return () => { cancelled = true }
+  }, [src])
+
+  useEffect(() => {
+    if (!canvasRef.current || !peaks) return
+    const canvas = canvasRef.current
+    const dpr = window.devicePixelRatio || 1
+    const cssW = canvas.clientWidth
+    const cssH = height
+    canvas.width = Math.floor(cssW * dpr)
+    canvas.height = Math.floor(cssH * dpr)
+    const ctx = canvas.getContext('2d')
+    ctx.scale(dpr, dpr)
+    ctx.clearRect(0, 0, cssW, cssH)
+
+    // Waveform
+    const accent = getComputedStyle(canvas).getPropertyValue('--biometrics-wave').trim() || '#e8a87c'
+    ctx.fillStyle = accent
+    const mid = cssH / 2
+    const barW = Math.max(1, cssW / peaks.length)
+    for (let i = 0; i < peaks.length; i++) {
+      const h = Math.max(1, peaks[i] * (cssH * 0.9))
+      ctx.fillRect(i * barW, mid - h / 2, Math.max(0.5, barW - 0.5), h)
+    }
+  }, [peaks, height])
+
+  if (err) return <div className="biometrics-waveform biometrics-waveform--error">{err}</div>
+  if (!src) return null
+
+  return (
+    <div className="biometrics-waveform" style={{ height }}>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
+      {duration > 0 && segments.map((s, i) => {
+        const left = (Math.max(0, s.start) / duration) * 100
+        const right = (Math.min(duration, s.end) / duration) * 100
+        return (
+          <div key={i} className={`biometrics-waveform__segment tone-${s.tone || 'accent'}`}
+            style={{ left: `${left}%`, width: `${Math.max(0.5, right - left)}%` }}>
+            {s.label && <span className="biometrics-waveform__seglabel">{s.label}</span>}
+          </div>
+        )
+      })}
+      {duration > 0 && (
+        <div className="biometrics-waveform__duration" aria-hidden="true">{duration.toFixed(1)}s</div>
+      )}
+      {!peaks && (
+        <div className="biometrics-waveform__loading">Decoding…</div>
+      )}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/hooks/useMediaCapture.js b/core/http/react-ui/src/hooks/useMediaCapture.js
new file mode 100644
index 000000000000..85576b577ea7
--- /dev/null
+++ b/core/http/react-ui/src/hooks/useMediaCapture.js
@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// Encode an AudioBuffer as a 16-bit PCM mono WAV blob. Libsndfile (which the
+// SpeechBrain / ONNX voice backends use) reads this shape without extra
+// decoders. We downmix to mono because speaker-encoder models expect a single
+// channel and sample-rate resampling is handled server-side.
+function audioBufferToWavBlob(audioBuffer) {
+  const sampleRate = audioBuffer.sampleRate
+  const numFrames = audioBuffer.length
+  const bitsPerSample = 16
+  const blockAlign = bitsPerSample / 8 // mono, 1 channel
+  const byteRate = sampleRate * blockAlign
+  const dataSize = numFrames * blockAlign
+  const out = new ArrayBuffer(44 + dataSize)
+  const view = new DataView(out)
+
+  const writeAscii = (offset, s) => {
+    for (let i = 0; i < s.length; i++) view.setUint8(offset + i, s.charCodeAt(i))
+  }
+  writeAscii(0, 'RIFF')
+  view.setUint32(4, 36 + dataSize, true)
+  writeAscii(8, 'WAVE')
+  writeAscii(12, 'fmt ')
+  view.setUint32(16, 16, true)           // fmt chunk size
+  view.setUint16(20, 1, true)            // PCM
+  view.setUint16(22, 1, true)            // mono
+  view.setUint32(24, sampleRate, true)
+  view.setUint32(28, byteRate, true)
+  view.setUint16(32, blockAlign, true)
+  view.setUint16(34, bitsPerSample, true)
+  writeAscii(36, 'data')
+  view.setUint32(40, dataSize, true)
+
+  // Average all input channels into mono, then clamp + convert to int16.
+  const numChannels = audioBuffer.numberOfChannels
+  const channels = []
+  for (let c = 0; c < numChannels; c++) channels.push(audioBuffer.getChannelData(c))
+  let offset = 44
+  for (let i = 0; i < numFrames; i++) {
+    let sum = 0
+    for (let c = 0; c < numChannels; c++) sum += channels[c][i]
+    const mono = Math.max(-1, Math.min(1, sum / numChannels))
+    view.setInt16(offset, mono < 0 ? mono * 0x8000 : mono * 0x7FFF, true)
+    offset += 2
+  }
+  return new Blob([out], { type: 'audio/wav' })
+}
+
+// useMediaCapture — wraps getUserMedia + MediaRecorder for the biometrics pages.
+// mode: 'image' streams video-only for a snap-to-canvas; 'audio' records a clip via MediaRecorder.
+// Consumers attach the returned videoRef to a <video autoPlay muted playsInline/> element.
+export function useMediaCapture(mode) {
+  const [active, setActive] = useState(false)
+  const [recording, setRecording] = useState(false)
+  const [error, setError] = useState(null)
+  const [elapsed, setElapsed] = useState(0)
+
+  const streamRef = useRef(null)
+  const videoRef = useRef(null)
+  const recorderRef = useRef(null)
+  const chunksRef = useRef([])
+  const tickRef = useRef(null)
+  const resolveStopRef = useRef(null)
+
+  const supported = typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia
+
+  const stopStream = useCallback(() => {
+    if (tickRef.current) {
+      clearInterval(tickRef.current)
+      tickRef.current = null
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach(t => { try { t.stop() } catch (_) { /* ignore */ } })
+      streamRef.current = null
+    }
+    if (videoRef.current) {
+      try { videoRef.current.srcObject = null } catch (_) { /* ignore */ }
+    }
+    setActive(false)
+    setRecording(false)
+    setElapsed(0)
+  }, [])
+
+  const start = useCallback(async () => {
+    if (!supported) {
+      setError('Your browser does not support media capture.')
+      return
+    }
+    setError(null)
+    try {
+      const constraints = mode === 'audio'
+        ? { audio: true }
+        : { video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } } }
+      const stream = await navigator.mediaDevices.getUserMedia(constraints)
+      streamRef.current = stream
+      // Attachment happens in the useEffect below — videoRef.current is still
+      // null at this point because the <video> element mounts only after React
+      // processes the setActive(true) state change.
+      setActive(true)
+    } catch (e) {
+      setError(e?.message || 'Could not access device')
+      stopStream()
+    }
+  }, [mode, supported, stopStream])
+
+  // Hook the stream into the <video> once both the stream and the element exist.
+  useEffect(() => {
+    if (mode !== 'image' || !active) return
+    const v = videoRef.current
+    const s = streamRef.current
+    if (!v || !s) return
+    if (v.srcObject !== s) v.srcObject = s
+    const playPromise = v.play()
+    if (playPromise && typeof playPromise.catch === 'function') {
+      playPromise.catch(() => { /* autoplay gated */ })
+    }
+  }, [active, mode])
+
+  // Snap a frame from the live video stream to a PNG base64 (image mode).
+  const snap = useCallback(() => {
+    if (mode !== 'image' || !videoRef.current || !streamRef.current) return null
+    const v = videoRef.current
+    const w = v.videoWidth || 640
+    const h = v.videoHeight || 480
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(v, 0, 0, w, h)
+    const dataUrl = canvas.toDataURL('image/png')
+    const base64 = dataUrl.split(',')[1] || ''
+    return { base64, dataUrl, mime: 'image/png' }
+  }, [mode])
+
+  // Start an audio recording — returns a promise that resolves with a WAV-encoded
+  // {base64, blob, dataUrl, mime} on stopRecording. Transcoding to 16-bit PCM mono
+  // WAV is necessary because the voice backends open the file via libsndfile, which
+  // doesn't handle WebM/Ogg-Opus containers — the browser's native MediaRecorder
+  // output — out of the box.
+  const startRecording = useCallback(() => {
+    if (mode !== 'audio' || !streamRef.current) return null
+    chunksRef.current = []
+    const recMime = (typeof MediaRecorder !== 'undefined' && MediaRecorder.isTypeSupported('audio/webm;codecs=opus'))
+      ? 'audio/webm;codecs=opus'
+      : 'audio/webm'
+    let rec
+    try {
+      rec = new MediaRecorder(streamRef.current, { mimeType: recMime })
+    } catch (_) {
+      rec = new MediaRecorder(streamRef.current)
+    }
+    recorderRef.current = rec
+    rec.ondataavailable = (e) => { if (e.data && e.data.size > 0) chunksRef.current.push(e.data) }
+    const donePromise = new Promise((resolve, reject) => {
+      resolveStopRef.current = resolve
+      rec.onstop = async () => {
+        try {
+          const recBlob = new Blob(chunksRef.current, { type: rec.mimeType || recMime })
+          const arrayBuf = await recBlob.arrayBuffer()
+          const Ctx = window.AudioContext || window.webkitAudioContext
+          const ctx = new Ctx()
+          const audioBuf = await ctx.decodeAudioData(arrayBuf.slice(0))
+          const wavBlob = audioBufferToWavBlob(audioBuf)
+          ctx.close()
+          const dataUrl = await new Promise((res) => {
+            const reader = new FileReader()
+            reader.onloadend = () => res(reader.result)
+            reader.readAsDataURL(wavBlob)
+          })
+          const base64 = typeof dataUrl === 'string' ? (dataUrl.split(',')[1] || '') : ''
+          resolve({ blob: wavBlob, base64, dataUrl, mime: 'audio/wav' })
+        } catch (err) {
+          reject(err)
+        } finally {
+          resolveStopRef.current = null
+        }
+      }
+    })
+    rec.start()
+    setRecording(true)
+    setElapsed(0)
+    const started = Date.now()
+    tickRef.current = setInterval(() => setElapsed((Date.now() - started) / 1000), 100)
+    return donePromise
+  }, [mode])
+
+  const stopRecording = useCallback(() => {
+    if (recorderRef.current && recorderRef.current.state !== 'inactive') {
+      recorderRef.current.stop()
+    }
+    if (tickRef.current) {
+      clearInterval(tickRef.current)
+      tickRef.current = null
+    }
+    setRecording(false)
+  }, [])
+
+  // Cleanup on unmount — always release the device.
+  useEffect(() => () => stopStream(), [stopStream])
+
+  return {
+    supported, active, recording, error, elapsed,
+    videoRef, start, stop: stopStream, snap, startRecording, stopRecording,
+  }
+}
diff --git a/core/http/react-ui/src/pages/FaceRecognition.jsx b/core/http/react-ui/src/pages/FaceRecognition.jsx
new file mode 100644
index 000000000000..9185ea744f81
--- /dev/null
+++ b/core/http/react-ui/src/pages/FaceRecognition.jsx
@@ -0,0 +1,602 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useOutletContext, useParams } from 'react-router-dom'
+import ModelSelector from '../components/ModelSelector'
+import LoadingSpinner from '../components/LoadingSpinner'
+import ErrorWithTraceLink from '../components/ErrorWithTraceLink'
+import TabSwitch from '../components/biometrics/TabSwitch'
+import MediaInput from '../components/biometrics/MediaInput'
+import BoundingBoxCanvas from '../components/biometrics/BoundingBoxCanvas'
+import MatchGauge from '../components/biometrics/MatchGauge'
+import DistributionBars from '../components/biometrics/DistributionBars'
+import EnrollmentList from '../components/biometrics/EnrollmentList'
+import EmbeddingInspector from '../components/biometrics/EmbeddingInspector'
+import { CAP_FACE_RECOGNITION } from '../utils/capabilities'
+import { faceApi } from '../utils/api'
+
+const TABS = [
+  { id: 'analyze',  icon: 'fas fa-chart-column', label: 'Analyze' },
+  { id: 'compare',  icon: 'fas fa-people-arrows', label: 'Compare' },
+  { id: 'enroll',   icon: 'fas fa-id-card',       label: 'Enrollment' },
+  { id: 'embed',    icon: 'fas fa-code',          label: 'Embedding' },
+]
+
+const ENROLL_KEY = 'localai_face_enrollments'
+
+function loadEnrollments() {
+  try {
+    const raw = localStorage.getItem(ENROLL_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? parsed : []
+  } catch (_) { return [] }
+}
+
+function saveEnrollments(list) {
+  try { localStorage.setItem(ENROLL_KEY, JSON.stringify(list.slice(0, 50))) } catch (_) { /* quota */ }
+}
+
+// parse a textarea of "key: value" lines into a { key: value } object.
+function parseLabels(text) {
+  const out = {}
+  if (!text) return out
+  for (const line of text.split('\n')) {
+    const idx = line.indexOf(':')
+    if (idx === -1) continue
+    const k = line.slice(0, idx).trim()
+    const v = line.slice(idx + 1).trim()
+    if (k) out[k] = v
+  }
+  return out
+}
+
+export default function FaceRecognition() {
+  const { model: urlModel } = useParams()
+  const { addToast } = useOutletContext()
+
+  const [model, setModel] = useState(urlModel || '')
+  const [tab, setTab] = useState('analyze')
+
+  return (
+    <div className="biometrics-page">
+      <header className="biometrics-page__header">
+        <div>
+          <h1 className="page-title"><i className="fas fa-face-smile" aria-hidden="true" /> Face Recognition</h1>
+          <p className="page-subtitle">Compare, identify, and analyze faces using any face model installed on this LocalAI instance. Samples never leave your machine — they go only to the running backend.</p>
+        </div>
+        <div className="biometrics-page__model">
+          <label className="form-label" htmlFor="face-model">Model</label>
+          <ModelSelector value={model} onChange={setModel} capability={CAP_FACE_RECOGNITION} />
+        </div>
+      </header>
+
+      <TabSwitch tabs={TABS} value={tab} onChange={setTab} />
+
+      <div className="biometrics-page__body">
+        {tab === 'analyze' && <AnalyzeTab model={model} addToast={addToast} />}
+        {tab === 'compare' && <CompareTab model={model} addToast={addToast} />}
+        {tab === 'enroll' && <EnrollTab model={model} addToast={addToast} />}
+        {tab === 'embed' && <EmbedTab model={model} addToast={addToast} />}
+      </div>
+    </div>
+  )
+}
+
+// ──────────────────────────── Analyze ────────────────────────────
+
+function AnalyzeTab({ model, addToast }) {
+  const [img, setImg] = useState(null)
+  const [actions, setActions] = useState({ age: true, gender: true, emotion: true, race: true })
+  const [antiSpoofing, setAntiSpoofing] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+  const [focusIdx, setFocusIdx] = useState(0)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a face model first', 'warning'); return }
+    if (!img) { addToast('Add an image to analyze', 'warning'); return }
+    setLoading(true); setError(null); setResult(null); setFocusIdx(0)
+    try {
+      const body = {
+        model,
+        img: img.dataUrl,
+        actions: Object.entries(actions).filter(([, v]) => v).map(([k]) => k),
+        anti_spoofing: antiSpoofing,
+      }
+      const data = await faceApi.analyze(body)
+      setResult(data)
+      if (!data?.faces?.length) addToast('No face detected in the image', 'warning')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const boxes = useMemo(() => (result?.faces || []).map((f, i) => ({
+    x: f.region.x, y: f.region.y, w: f.region.w, h: f.region.h,
+    label: f.dominant_emotion || f.dominant_gender || `Face ${i + 1}`,
+    sublabel: f.age ? `~${Math.round(f.age)}y` : null,
+    tone: i === focusIdx ? 'accent' : 'default',
+  })), [result, focusIdx])
+
+  const faces = result?.faces || []
+  const focus = faces[focusIdx]
+
+  return (
+    <form className="biometrics-twocol" onSubmit={submit}>
+      <aside className="biometrics-panel">
+        <h2 className="biometrics-panel__title">Analyze a face</h2>
+        <MediaInput mode="image" label="Source image" value={img} onChange={setImg} idPrefix="face-analyze" />
+
+        <fieldset className="biometrics-fieldset">
+          <legend>Attributes</legend>
+          <div className="biometrics-chipset" role="group">
+            {['age', 'gender', 'emotion', 'race'].map(k => (
+              <label key={k} className={`biometrics-chip ${actions[k] ? 'active' : ''}`}>
+                <input type="checkbox" checked={actions[k]} onChange={(e) => setActions(a => ({ ...a, [k]: e.target.checked }))} />
+                <span>{k}</span>
+              </label>
+            ))}
+          </div>
+        </fieldset>
+
+        <div className="form-row">
+          <div className="form-row__label">
+            <span className="form-row__label-text">Anti-spoofing</span>
+            <span className="form-row__hint">Reject photos-of-photos (requires model support).</span>
+          </div>
+          <label className="biometrics-switch">
+            <input type="checkbox" checked={antiSpoofing} onChange={(e) => setAntiSpoofing(e.target.checked)} />
+            <span aria-hidden="true" />
+          </label>
+        </div>
+
+        <button type="submit" className="btn btn-primary btn-full" disabled={loading || !img}>
+          {loading ? <><LoadingSpinner size="sm" /> Analyzing…</> : <><i className="fas fa-wand-magic-sparkles" /> Analyze</>}
+        </button>
+      </aside>
+
+      <section className="biometrics-results">
+        {loading && <div className="biometrics-empty"><LoadingSpinner size="lg" /></div>}
+        {error && <ErrorWithTraceLink message={error} />}
+        {!loading && !error && !result && (
+          <EmptyState icon="fas fa-face-smile"
+            title="Drop a portrait to analyze"
+            body="The backend will detect each face and return age, gender, emotion, and race distributions — with an optional liveness check." />
+        )}
+        {result && img && (
+          <>
+            <div className="biometrics-split">
+              <div className="biometrics-split__media">
+                <BoundingBoxCanvas src={img.dataUrl} boxes={boxes} alt="Analyzed source" />
+                {faces.length > 1 && (
+                  <div className="biometrics-facepicker" role="tablist" aria-label="Select face">
+                    {faces.map((_, i) => (
+                      <button key={i} type="button"
+                        className={`biometrics-facepicker__chip ${i === focusIdx ? 'active' : ''}`}
+                        onClick={() => setFocusIdx(i)}
+                        aria-pressed={i === focusIdx}>
+                        Face {i + 1}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div className="biometrics-split__aside">
+                {focus && (
+                  <>
+                    <div className="biometrics-summary card">
+                      <div className="biometrics-summary__head">
+                        <h3><i className="fas fa-user" /> Face {focusIdx + 1}</h3>
+                        {antiSpoofing && <LivenessPill isReal={focus.is_real} score={focus.antispoof_score} />}
+                      </div>
+                      <dl className="biometrics-summary__grid">
+                        {focus.age != null && <><dt>Age</dt><dd>~{Math.round(focus.age)}</dd></>}
+                        {focus.dominant_gender && <><dt>Gender</dt><dd>{focus.dominant_gender}</dd></>}
+                        {focus.dominant_emotion && <><dt>Emotion</dt><dd>{focus.dominant_emotion}</dd></>}
+                        {focus.dominant_race && <><dt>Race</dt><dd>{focus.dominant_race}</dd></>}
+                        {focus.face_confidence != null && <><dt>Detection</dt><dd>{(focus.face_confidence * 100).toFixed(1)}%</dd></>}
+                      </dl>
+                    </div>
+                    <DistributionBars title="Gender" icon="fas fa-venus-mars" distribution={focus.gender} dominant={focus.dominant_gender} />
+                    <DistributionBars title="Emotion" icon="fas fa-face-smile-beam" distribution={focus.emotion} dominant={focus.dominant_emotion} />
+                    <DistributionBars title="Race" icon="fas fa-globe" distribution={focus.race} dominant={focus.dominant_race} />
+                  </>
+                )}
+              </div>
+            </div>
+            <ResponseDetails data={result} />
+          </>
+        )}
+      </section>
+    </form>
+  )
+}
+
+// ──────────────────────────── Compare ────────────────────────────
+
+function CompareTab({ model, addToast }) {
+  const [img1, setImg1] = useState(null)
+  const [img2, setImg2] = useState(null)
+  const [antiSpoofing, setAntiSpoofing] = useState(false)
+  const [threshold, setThreshold] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a face model first', 'warning'); return }
+    if (!img1 || !img2) { addToast('Add both images to compare', 'warning'); return }
+    setLoading(true); setError(null); setResult(null)
+    try {
+      const body = { model, img1: img1.dataUrl, img2: img2.dataUrl, anti_spoofing: antiSpoofing }
+      if (threshold != null) body.threshold = threshold
+      const data = await faceApi.verify(body)
+      setResult(data)
+      if (threshold == null && data?.threshold) setThreshold(data.threshold)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Re-compute verified locally when user drags the threshold slider post-response.
+  const effective = useMemo(() => {
+    if (!result) return null
+    const t = threshold ?? result.threshold
+    const verified = result.distance <= t
+    const confidence = Math.max(0, Math.min(100, 100 * (1 - result.distance / t)))
+    return { verified, confidence, threshold: t, distance: result.distance }
+  }, [result, threshold])
+
+  return (
+    <form className="biometrics-twocol" onSubmit={submit}>
+      <aside className="biometrics-panel">
+        <h2 className="biometrics-panel__title">Compare two faces</h2>
+        <MediaInput mode="image" label="First image" value={img1} onChange={setImg1} idPrefix="face-cmp-1" />
+        <MediaInput mode="image" label="Second image" value={img2} onChange={setImg2} idPrefix="face-cmp-2" />
+
+        <div className="form-row">
+          <div className="form-row__label">
+            <span className="form-row__label-text">Anti-spoofing</span>
+            <span className="form-row__hint">Flag photos-of-photos on either image.</span>
+          </div>
+          <label className="biometrics-switch">
+            <input type="checkbox" checked={antiSpoofing} onChange={(e) => setAntiSpoofing(e.target.checked)} />
+            <span aria-hidden="true" />
+          </label>
+        </div>
+
+        <button type="submit" className="btn btn-primary btn-full" disabled={loading || !img1 || !img2}>
+          {loading ? <><LoadingSpinner size="sm" /> Comparing…</> : <><i className="fas fa-equals" /> Compare</>}
+        </button>
+      </aside>
+
+      <section className="biometrics-results">
+        {loading && <div className="biometrics-empty"><LoadingSpinner size="lg" /></div>}
+        {error && <ErrorWithTraceLink message={error} />}
+        {!loading && !error && !result && (
+          <EmptyState icon="fas fa-people-arrows"
+            title="Drop two images to compare"
+            body="The backend will extract an embedding for each face and report the cosine distance between them. A match is declared when distance is below the threshold." />
+        )}
+        {result && effective && (
+          <>
+            <div className="biometrics-compare">
+              <div className="biometrics-compare__panel">
+                <div className="biometrics-compare__label">Image 1</div>
+                <BoundingBoxCanvas src={img1?.dataUrl}
+                  boxes={result.img1_area ? [{ ...result.img1_area, label: result.img1_is_real === false ? 'Spoof' : null, tone: 'accent' }] : []} />
+                {antiSpoofing && result.img1_is_real != null && (
+                  <LivenessPill isReal={result.img1_is_real} score={result.img1_antispoof_score} />
+                )}
+              </div>
+              <div className="biometrics-compare__center">
+                <MatchGauge
+                  distance={effective.distance}
+                  threshold={effective.threshold}
+                  confidence={effective.confidence}
+                  verified={effective.verified}
+                />
+                <div className="biometrics-compare__threshold">
+                  <label htmlFor="face-threshold">Threshold <code>{effective.threshold.toFixed(3)}</code></label>
+                  <input id="face-threshold" type="range" min="0" max="1" step="0.005"
+                    value={effective.threshold}
+                    onChange={(e) => setThreshold(parseFloat(e.target.value))}
+                    aria-describedby="face-threshold-hint" />
+                  <p id="face-threshold-hint" className="biometrics-compare__hint">
+                    Drag to see how the verdict changes. The backend default is <code>{result.threshold?.toFixed(3)}</code>.
+                  </p>
+                </div>
+              </div>
+              <div className="biometrics-compare__panel">
+                <div className="biometrics-compare__label">Image 2</div>
+                <BoundingBoxCanvas src={img2?.dataUrl}
+                  boxes={result.img2_area ? [{ ...result.img2_area, label: result.img2_is_real === false ? 'Spoof' : null, tone: 'accent' }] : []} />
+                {antiSpoofing && result.img2_is_real != null && (
+                  <LivenessPill isReal={result.img2_is_real} score={result.img2_antispoof_score} />
+                )}
+              </div>
+            </div>
+            <ResponseDetails data={result} />
+          </>
+        )}
+      </section>
+    </form>
+  )
+}
+
+// ──────────────────────────── Enrollment (register / identify / forget) ────────────────────────────
+
+function EnrollTab({ model, addToast }) {
+  const [enrolled, setEnrolled] = useState(loadEnrollments)
+  const [enrollName, setEnrollName] = useState('')
+  const [enrollLabels, setEnrollLabels] = useState('')
+  const [enrollImg, setEnrollImg] = useState(null)
+  const [enrolling, setEnrolling] = useState(false)
+  const [enrollErr, setEnrollErr] = useState(null)
+  const [lastEnrolled, setLastEnrolled] = useState(null)
+
+  const [probeImg, setProbeImg] = useState(null)
+  const [topK, setTopK] = useState(5)
+  const [threshold, setThreshold] = useState(0.35)
+  const [identifying, setIdentifying] = useState(false)
+  const [identifyErr, setIdentifyErr] = useState(null)
+  const [identifyResult, setIdentifyResult] = useState(null)
+
+  useEffect(() => { saveEnrollments(enrolled) }, [enrolled])
+
+  const enroll = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a face model first', 'warning'); return }
+    if (!enrollName.trim()) { addToast('Give this person a name', 'warning'); return }
+    if (!enrollImg) { addToast('Add a sample image', 'warning'); return }
+    setEnrolling(true); setEnrollErr(null)
+    try {
+      const data = await faceApi.register({
+        model,
+        name: enrollName.trim(),
+        img: enrollImg.dataUrl,
+        labels: parseLabels(enrollLabels),
+      })
+      const entry = {
+        id: data.id,
+        name: data.name,
+        labels: parseLabels(enrollLabels),
+        thumbnail: enrollImg.dataUrl,
+        registeredAt: data.registered_at || new Date().toISOString(),
+      }
+      setEnrolled(prev => [entry, ...prev])
+      setLastEnrolled(entry.id)
+      setEnrollName(''); setEnrollLabels(''); setEnrollImg(null)
+      addToast(`Enrolled ${entry.name}`, 'success')
+    } catch (err) {
+      setEnrollErr(err.message)
+    } finally {
+      setEnrolling(false)
+    }
+  }
+
+  const forget = async (entry) => {
+    try {
+      await faceApi.forget({ id: entry.id })
+      setEnrolled(prev => prev.filter(e => e.id !== entry.id))
+      addToast(`Removed ${entry.name}`, 'info')
+    } catch (err) {
+      if (err.status === 404) {
+        setEnrolled(prev => prev.filter(e => e.id !== entry.id))
+        addToast(`${entry.name} was already gone from the backend store`, 'warning')
+      } else {
+        addToast(err.message, 'error')
+      }
+    }
+  }
+
+  const identify = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a face model first', 'warning'); return }
+    if (!probeImg) { addToast('Add a probe image', 'warning'); return }
+    setIdentifying(true); setIdentifyErr(null); setIdentifyResult(null)
+    try {
+      const data = await faceApi.identify({
+        model,
+        img: probeImg.dataUrl,
+        top_k: topK,
+        threshold,
+      })
+      setIdentifyResult(data)
+      if (!data?.matches?.length) addToast('No matches above threshold', 'info')
+    } catch (err) {
+      setIdentifyErr(err.message)
+    } finally {
+      setIdentifying(false)
+    }
+  }
+
+  return (
+    <div className="biometrics-enrollgrid">
+      <section className="biometrics-enrollgrid__register card">
+        <h2 className="biometrics-panel__title"><i className="fas fa-user-plus" /> Enroll a face</h2>
+        <form onSubmit={enroll}>
+          <div className="form-group">
+            <label className="form-label" htmlFor="face-enroll-name">Name</label>
+            <input id="face-enroll-name" className="input" value={enrollName}
+              onChange={(e) => setEnrollName(e.target.value)} placeholder="e.g. Alice Johnson" />
+          </div>
+          <div className="form-group">
+            <label className="form-label" htmlFor="face-enroll-labels">Labels <span className="form-label__hint">(optional, one per line)</span></label>
+            <textarea id="face-enroll-labels" className="textarea" rows={2}
+              placeholder={"team: engineering\nfloor: 3"}
+              value={enrollLabels} onChange={(e) => setEnrollLabels(e.target.value)} />
+          </div>
+          <MediaInput mode="image" label="Sample image" value={enrollImg} onChange={setEnrollImg} idPrefix="face-enroll" />
+          <button type="submit" className="btn btn-primary btn-full" disabled={enrolling}>
+            {enrolling ? <><LoadingSpinner size="sm" /> Enrolling…</> : <><i className="fas fa-plus" /> Enroll</>}
+          </button>
+          {enrollErr && <div className="biometrics-enrollgrid__err"><ErrorWithTraceLink message={enrollErr} /></div>}
+        </form>
+      </section>
+
+      <section className="biometrics-enrollgrid__identify card">
+        <h2 className="biometrics-panel__title"><i className="fas fa-magnifying-glass" /> Identify someone</h2>
+        <form onSubmit={identify}>
+          <MediaInput mode="image" label="Probe image" value={probeImg} onChange={setProbeImg} idPrefix="face-probe" />
+          <div className="form-grid-2col">
+            <div className="form-group">
+              <label className="form-label" htmlFor="face-topk">Top-K</label>
+              <input id="face-topk" type="number" min="1" max="25" className="input"
+                value={topK} onChange={(e) => setTopK(parseInt(e.target.value) || 1)} />
+            </div>
+            <div className="form-group">
+              <label className="form-label" htmlFor="face-threshold-id">Threshold</label>
+              <input id="face-threshold-id" type="number" min="0" max="1" step="0.01" className="input"
+                value={threshold} onChange={(e) => setThreshold(parseFloat(e.target.value) || 0)} />
+            </div>
+          </div>
+          <button type="submit" className="btn btn-primary btn-full" disabled={identifying || !probeImg}>
+            {identifying ? <><LoadingSpinner size="sm" /> Searching…</> : <><i className="fas fa-magnifying-glass" /> Identify</>}
+          </button>
+          {identifyErr && <div className="biometrics-enrollgrid__err"><ErrorWithTraceLink message={identifyErr} /></div>}
+          {identifyResult && <MatchesList matches={identifyResult.matches || []} enrolled={enrolled} />}
+        </form>
+      </section>
+
+      <section className="biometrics-enrollgrid__list">
+        <div className="biometrics-enroll__head">
+          <h2 className="biometrics-panel__title"><i className="fas fa-id-card" /> Enrolled <span className="biometrics-enroll__count">{enrolled.length}</span></h2>
+        </div>
+        <EnrollmentList entries={enrolled} onDelete={forget} mode="image" highlightId={lastEnrolled} />
+      </section>
+    </div>
+  )
+}
+
+function MatchesList({ matches, enrolled }) {
+  if (!matches.length) {
+    return <div className="biometrics-matches__empty">No candidates above threshold.</div>
+  }
+  return (
+    <ul className="biometrics-matches" aria-label="Matches">
+      {matches.map((m, i) => {
+        const record = enrolled.find(e => e.id === m.id)
+        const conf = Math.max(0, Math.min(100, m.confidence ?? 0))
+        return (
+          <li key={m.id} className={`biometrics-matches__row ${m.match ? 'match' : 'miss'}`}>
+            <div className="biometrics-matches__rank">#{i + 1}</div>
+            <div className="biometrics-matches__avatar">
+              {record?.thumbnail
+                ? <img src={record.thumbnail} alt="" />
+                : <span>{(m.name || '?').slice(0, 2).toUpperCase()}</span>}
+            </div>
+            <div className="biometrics-matches__body">
+              <div className="biometrics-matches__name">
+                <strong>{m.name || m.id}</strong>
+                {m.match ? <span className="biometrics-matches__badge match"><i className="fas fa-check" /> match</span>
+                         : <span className="biometrics-matches__badge miss">below threshold</span>}
+              </div>
+              <div className="biometrics-matches__meter" aria-hidden="true">
+                <div className="biometrics-matches__fill" style={{ width: `${conf}%` }} />
+              </div>
+              <div className="biometrics-matches__meta">
+                <span>distance <code>{m.distance?.toFixed?.(4) ?? '—'}</code></span>
+                <span>confidence <code>{conf.toFixed(1)}%</code></span>
+              </div>
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+// ──────────────────────────── Embedding ────────────────────────────
+
+function EmbedTab({ model, addToast }) {
+  const [img, setImg] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+  const [elapsedMs, setElapsedMs] = useState(null)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a face model first', 'warning'); return }
+    if (!img) { addToast('Add an image', 'warning'); return }
+    setLoading(true); setError(null); setResult(null)
+    const started = performance.now()
+    try {
+      const data = await faceApi.embed({ model, img: img.dataUrl })
+      setElapsedMs(performance.now() - started)
+      setResult(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form className="biometrics-twocol" onSubmit={submit}>
+      <aside className="biometrics-panel">
+        <h2 className="biometrics-panel__title">Get a raw embedding</h2>
+        <p className="biometrics-panel__note">
+          Returns a single face embedding vector. This is the same representation the backend uses internally for verify, identify, and compare.
+        </p>
+        <MediaInput mode="image" label="Image" value={img} onChange={setImg} idPrefix="face-embed" />
+        <button type="submit" className="btn btn-primary btn-full" disabled={loading || !img}>
+          {loading ? <><LoadingSpinner size="sm" /> Embedding…</> : <><i className="fas fa-code" /> Extract vector</>}
+        </button>
+      </aside>
+      <section className="biometrics-results">
+        {loading && <div className="biometrics-empty"><LoadingSpinner size="lg" /></div>}
+        {error && <ErrorWithTraceLink message={error} />}
+        {!loading && !error && !result && (
+          <EmptyState icon="fas fa-code"
+            title="Get a face embedding"
+            body="For developers — retrieve the raw vector for a face to store, search, or cluster outside of LocalAI." />
+        )}
+        {result && (
+          <EmbeddingInspector embedding={result.embedding} dim={result.dim} model={result.model} elapsedMs={elapsedMs} />
+        )}
+      </section>
+    </form>
+  )
+}
+
+// ──────────────────────────── Small shared bits ────────────────────────────
+
+function LivenessPill({ isReal, score }) {
+  if (isReal == null) {
+    return <span className="biometrics-pill muted"><i className="fas fa-circle-question" /> Not checked</span>
+  }
+  return (
+    <span className={`biometrics-pill ${isReal ? 'good' : 'bad'}`}>
+      <i className={`fas ${isReal ? 'fa-user-shield' : 'fa-mask'}`} />
+      {isReal ? 'Real' : 'Spoof'}
+      {score != null && <small>{(score * 100).toFixed(0)}%</small>}
+    </span>
+  )
+}
+
+function EmptyState({ icon, title, body }) {
+  return (
+    <div className="biometrics-empty">
+      <i className={icon} aria-hidden="true" />
+      <h3>{title}</h3>
+      <p>{body}</p>
+    </div>
+  )
+}
+
+function ResponseDetails({ data }) {
+  return (
+    <details className="biometrics-response">
+      <summary><i className="fas fa-angle-right" aria-hidden="true" /> Raw response</summary>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </details>
+  )
+}
diff --git a/core/http/react-ui/src/pages/VoiceRecognition.jsx b/core/http/react-ui/src/pages/VoiceRecognition.jsx
new file mode 100644
index 000000000000..2dd29543591c
--- /dev/null
+++ b/core/http/react-ui/src/pages/VoiceRecognition.jsx
@@ -0,0 +1,543 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useOutletContext, useParams } from 'react-router-dom'
+import ModelSelector from '../components/ModelSelector'
+import LoadingSpinner from '../components/LoadingSpinner'
+import ErrorWithTraceLink from '../components/ErrorWithTraceLink'
+import TabSwitch from '../components/biometrics/TabSwitch'
+import MediaInput from '../components/biometrics/MediaInput'
+import WaveformStrip from '../components/biometrics/WaveformStrip'
+import MatchGauge from '../components/biometrics/MatchGauge'
+import DistributionBars from '../components/biometrics/DistributionBars'
+import EnrollmentList from '../components/biometrics/EnrollmentList'
+import EmbeddingInspector from '../components/biometrics/EmbeddingInspector'
+import { CAP_SPEAKER_RECOGNITION } from '../utils/capabilities'
+import { voiceApi } from '../utils/api'
+
+const TABS = [
+  { id: 'analyze', icon: 'fas fa-wave-square',  label: 'Analyze' },
+  { id: 'compare', icon: 'fas fa-people-arrows',    label: 'Compare' },
+  { id: 'enroll',  icon: 'fas fa-id-badge',         label: 'Enrollment' },
+  { id: 'embed',   icon: 'fas fa-code',             label: 'Embedding' },
+]
+
+const ENROLL_KEY = 'localai_voice_enrollments'
+
+function loadEnrollments() {
+  try {
+    const raw = localStorage.getItem(ENROLL_KEY)
+    if (!raw) return []
+    const p = JSON.parse(raw)
+    return Array.isArray(p) ? p : []
+  } catch (_) { return [] }
+}
+
+function saveEnrollments(list) {
+  try { localStorage.setItem(ENROLL_KEY, JSON.stringify(list.slice(0, 50))) } catch (_) { /* quota */ }
+}
+
+function parseLabels(text) {
+  const out = {}
+  if (!text) return out
+  for (const line of text.split('\n')) {
+    const idx = line.indexOf(':')
+    if (idx === -1) continue
+    const k = line.slice(0, idx).trim()
+    const v = line.slice(idx + 1).trim()
+    if (k) out[k] = v
+  }
+  return out
+}
+
+const TONE_FOR_SEGMENT = ['accent', 'info', 'success', 'warning', 'data1', 'data2']
+
+export default function VoiceRecognition() {
+  const { model: urlModel } = useParams()
+  const { addToast } = useOutletContext()
+  const [model, setModel] = useState(urlModel || '')
+  const [tab, setTab] = useState('analyze')
+
+  return (
+    <div className="biometrics-page">
+      <header className="biometrics-page__header">
+        <div>
+          <h1 className="page-title"><i className="fas fa-microphone-lines" aria-hidden="true" /> Voice Recognition</h1>
+          <p className="page-subtitle">
+            Compare, identify, and analyze speakers — the audio analog to face recognition. Record directly from your microphone or upload a clip.
+          </p>
+        </div>
+        <div className="biometrics-page__model">
+          <label className="form-label">Model</label>
+          <ModelSelector value={model} onChange={setModel} capability={CAP_SPEAKER_RECOGNITION} />
+        </div>
+      </header>
+
+      <TabSwitch tabs={TABS} value={tab} onChange={setTab} />
+
+      <div className="biometrics-page__body">
+        {tab === 'analyze' && <AnalyzeTab model={model} addToast={addToast} />}
+        {tab === 'compare' && <CompareTab model={model} addToast={addToast} />}
+        {tab === 'enroll' && <EnrollTab model={model} addToast={addToast} />}
+        {tab === 'embed' && <EmbedTab model={model} addToast={addToast} />}
+      </div>
+    </div>
+  )
+}
+
+// ──────────────────────────── Analyze ────────────────────────────
+
+function AnalyzeTab({ model, addToast }) {
+  const [audio, setAudio] = useState(null)
+  const [actions, setActions] = useState({ age: true, gender: true, emotion: true })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+  const [focusIdx, setFocusIdx] = useState(0)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a speaker model first', 'warning'); return }
+    if (!audio) { addToast('Add an audio clip', 'warning'); return }
+    setLoading(true); setError(null); setResult(null); setFocusIdx(0)
+    try {
+      const data = await voiceApi.analyze({
+        model,
+        audio: audio.dataUrl,
+        actions: Object.entries(actions).filter(([, v]) => v).map(([k]) => k),
+      })
+      setResult(data)
+      if (!data?.segments?.length) addToast('No speech segments detected', 'warning')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const segments = useMemo(() => result?.segments || [], [result])
+  const focus = segments[focusIdx]
+  const waveformSegments = useMemo(() => segments.map((s, i) => ({
+    start: s.start, end: s.end,
+    label: s.dominant_emotion || s.dominant_gender || `#${i + 1}`,
+    tone: i === focusIdx ? 'accent' : TONE_FOR_SEGMENT[i % TONE_FOR_SEGMENT.length],
+  })), [segments, focusIdx])
+
+  return (
+    <form className="biometrics-twocol" onSubmit={submit}>
+      <aside className="biometrics-panel">
+        <h2 className="biometrics-panel__title">Analyze a speaker</h2>
+        <MediaInput mode="audio" label="Audio clip" value={audio} onChange={setAudio} idPrefix="voice-analyze" />
+        <fieldset className="biometrics-fieldset">
+          <legend>Attributes</legend>
+          <div className="biometrics-chipset" role="group">
+            {['age', 'gender', 'emotion'].map(k => (
+              <label key={k} className={`biometrics-chip ${actions[k] ? 'active' : ''}`}>
+                <input type="checkbox" checked={actions[k]} onChange={(e) => setActions(a => ({ ...a, [k]: e.target.checked }))} />
+                <span>{k}</span>
+              </label>
+            ))}
+          </div>
+        </fieldset>
+        <button type="submit" className="btn btn-primary btn-full" disabled={loading || !audio}>
+          {loading ? <><LoadingSpinner size="sm" /> Analyzing…</> : <><i className="fas fa-wand-magic-sparkles" /> Analyze</>}
+        </button>
+      </aside>
+
+      <section className="biometrics-results">
+        {loading && <div className="biometrics-empty"><LoadingSpinner size="lg" /></div>}
+        {error && <ErrorWithTraceLink message={error} />}
+        {!loading && !error && !result && (
+          <EmptyState icon="fas fa-wave-square"
+            title="Record or upload a clip to analyze"
+            body="The backend will segment the audio by speaker turn and infer age, gender, and emotion per segment." />
+        )}
+        {result && audio && (
+          <>
+            <WaveformStrip src={audio.dataUrl} segments={waveformSegments} />
+            {segments.length > 1 && (
+              <div className="biometrics-facepicker" role="tablist" aria-label="Select segment">
+                {segments.map((s, i) => (
+                  <button key={i} type="button"
+                    className={`biometrics-facepicker__chip ${i === focusIdx ? 'active' : ''}`}
+                    onClick={() => setFocusIdx(i)}
+                    aria-pressed={i === focusIdx}>
+                    #{i + 1} <small>{s.start.toFixed(1)}s–{s.end.toFixed(1)}s</small>
+                  </button>
+                ))}
+              </div>
+            )}
+            {focus && (
+              <div className="biometrics-split">
+                <div className="biometrics-split__aside" style={{ gridColumn: '1 / -1' }}>
+                  <div className="biometrics-summary card">
+                    <div className="biometrics-summary__head">
+                      <h3><i className="fas fa-user" /> Segment {focusIdx + 1}
+                        <small>· {focus.start.toFixed(2)}s – {focus.end.toFixed(2)}s</small>
+                      </h3>
+                    </div>
+                    <dl className="biometrics-summary__grid">
+                      {focus.age != null && <><dt>Age</dt><dd>~{Math.round(focus.age)}</dd></>}
+                      {focus.dominant_gender && <><dt>Gender</dt><dd>{focus.dominant_gender}</dd></>}
+                      {focus.dominant_emotion && <><dt>Emotion</dt><dd>{focus.dominant_emotion}</dd></>}
+                    </dl>
+                  </div>
+                  <DistributionBars title="Gender" icon="fas fa-venus-mars" distribution={focus.gender} dominant={focus.dominant_gender} />
+                  <DistributionBars title="Emotion" icon="fas fa-face-smile-beam" distribution={focus.emotion} dominant={focus.dominant_emotion} />
+                </div>
+              </div>
+            )}
+            <ResponseDetails data={result} />
+          </>
+        )}
+      </section>
+    </form>
+  )
+}
+
+// ──────────────────────────── Compare ────────────────────────────
+
+function CompareTab({ model, addToast }) {
+  const [audio1, setAudio1] = useState(null)
+  const [audio2, setAudio2] = useState(null)
+  const [threshold, setThreshold] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a speaker model first', 'warning'); return }
+    if (!audio1 || !audio2) { addToast('Add both clips to compare', 'warning'); return }
+    setLoading(true); setError(null); setResult(null)
+    try {
+      const body = { model, audio1: audio1.dataUrl, audio2: audio2.dataUrl }
+      if (threshold != null) body.threshold = threshold
+      const data = await voiceApi.verify(body)
+      setResult(data)
+      if (threshold == null && data?.threshold) setThreshold(data.threshold)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const effective = useMemo(() => {
+    if (!result) return null
+    const t = threshold ?? result.threshold
+    const verified = result.distance <= t
+    const confidence = Math.max(0, Math.min(100, 100 * (1 - result.distance / t)))
+    return { verified, confidence, threshold: t, distance: result.distance }
+  }, [result, threshold])
+
+  return (
+    <form className="biometrics-twocol" onSubmit={submit}>
+      <aside className="biometrics-panel">
+        <h2 className="biometrics-panel__title">Compare two voices</h2>
+        <MediaInput mode="audio" label="First clip" value={audio1} onChange={setAudio1} idPrefix="voice-cmp-1" />
+        <MediaInput mode="audio" label="Second clip" value={audio2} onChange={setAudio2} idPrefix="voice-cmp-2" />
+        <button type="submit" className="btn btn-primary btn-full" disabled={loading || !audio1 || !audio2}>
+          {loading ? <><LoadingSpinner size="sm" /> Comparing…</> : <><i className="fas fa-equals" /> Compare</>}
+        </button>
+      </aside>
+
+      <section className="biometrics-results">
+        {loading && <div className="biometrics-empty"><LoadingSpinner size="lg" /></div>}
+        {error && <ErrorWithTraceLink message={error} />}
+        {!loading && !error && !result && (
+          <EmptyState icon="fas fa-people-arrows"
+            title="Drop two clips to compare"
+            body="We extract a speaker embedding for each clip and report the cosine distance — a match is declared when the distance is below the threshold." />
+        )}
+        {result && effective && (
+          <>
+            <div className="biometrics-compare biometrics-compare--voice">
+              <div className="biometrics-compare__panel">
+                <div className="biometrics-compare__label">Clip 1</div>
+                <WaveformStrip src={audio1?.dataUrl} height={80} />
+              </div>
+              <div className="biometrics-compare__center">
+                <MatchGauge
+                  distance={effective.distance}
+                  threshold={effective.threshold}
+                  confidence={effective.confidence}
+                  verified={effective.verified}
+                />
+                <div className="biometrics-compare__threshold">
+                  <label htmlFor="voice-threshold">Threshold <code>{effective.threshold.toFixed(3)}</code></label>
+                  <input id="voice-threshold" type="range" min="0" max="1" step="0.005"
+                    value={effective.threshold}
+                    onChange={(e) => setThreshold(parseFloat(e.target.value))} />
+                  <p className="biometrics-compare__hint">
+                    Drag to see how the verdict changes. The backend default is <code>{result.threshold?.toFixed(3)}</code>.
+                  </p>
+                </div>
+              </div>
+              <div className="biometrics-compare__panel">
+                <div className="biometrics-compare__label">Clip 2</div>
+                <WaveformStrip src={audio2?.dataUrl} height={80} />
+              </div>
+            </div>
+            <ResponseDetails data={result} />
+          </>
+        )}
+      </section>
+    </form>
+  )
+}
+
+// ──────────────────────────── Enrollment ────────────────────────────
+
+function EnrollTab({ model, addToast }) {
+  const [enrolled, setEnrolled] = useState(loadEnrollments)
+  const [enrollName, setEnrollName] = useState('')
+  const [enrollLabels, setEnrollLabels] = useState('')
+  const [enrollAudio, setEnrollAudio] = useState(null)
+  const [enrolling, setEnrolling] = useState(false)
+  const [enrollErr, setEnrollErr] = useState(null)
+  const [lastEnrolled, setLastEnrolled] = useState(null)
+
+  const [probeAudio, setProbeAudio] = useState(null)
+  const [topK, setTopK] = useState(5)
+  const [threshold, setThreshold] = useState(0.25)
+  const [identifying, setIdentifying] = useState(false)
+  const [identifyErr, setIdentifyErr] = useState(null)
+  const [identifyResult, setIdentifyResult] = useState(null)
+
+  useEffect(() => { saveEnrollments(enrolled) }, [enrolled])
+
+  const enroll = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a speaker model first', 'warning'); return }
+    if (!enrollName.trim()) { addToast('Give this speaker a name', 'warning'); return }
+    if (!enrollAudio) { addToast('Add a sample clip', 'warning'); return }
+    setEnrolling(true); setEnrollErr(null)
+    try {
+      const data = await voiceApi.register({
+        model,
+        name: enrollName.trim(),
+        audio: enrollAudio.dataUrl,
+        labels: parseLabels(enrollLabels),
+      })
+      const entry = {
+        id: data.id,
+        name: data.name,
+        labels: parseLabels(enrollLabels),
+        sampleUrl: enrollAudio.dataUrl,
+        registeredAt: data.registered_at || new Date().toISOString(),
+      }
+      setEnrolled(prev => [entry, ...prev])
+      setLastEnrolled(entry.id)
+      setEnrollName(''); setEnrollLabels(''); setEnrollAudio(null)
+      addToast(`Enrolled ${entry.name}`, 'success')
+    } catch (err) {
+      setEnrollErr(err.message)
+    } finally {
+      setEnrolling(false)
+    }
+  }
+
+  const forget = async (entry) => {
+    try {
+      await voiceApi.forget({ id: entry.id })
+      setEnrolled(prev => prev.filter(e => e.id !== entry.id))
+      addToast(`Removed ${entry.name}`, 'info')
+    } catch (err) {
+      if (err.status === 404) {
+        setEnrolled(prev => prev.filter(e => e.id !== entry.id))
+        addToast(`${entry.name} was already gone from the backend store`, 'warning')
+      } else {
+        addToast(err.message, 'error')
+      }
+    }
+  }
+
+  const identify = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a speaker model first', 'warning'); return }
+    if (!probeAudio) { addToast('Add a probe clip', 'warning'); return }
+    setIdentifying(true); setIdentifyErr(null); setIdentifyResult(null)
+    try {
+      const data = await voiceApi.identify({
+        model,
+        audio: probeAudio.dataUrl,
+        top_k: topK,
+        threshold,
+      })
+      setIdentifyResult(data)
+      if (!data?.matches?.length) addToast('No matches above threshold', 'info')
+    } catch (err) {
+      setIdentifyErr(err.message)
+    } finally {
+      setIdentifying(false)
+    }
+  }
+
+  return (
+    <div className="biometrics-enrollgrid">
+      <section className="biometrics-enrollgrid__register card">
+        <h2 className="biometrics-panel__title"><i className="fas fa-user-plus" /> Enroll a voice</h2>
+        <form onSubmit={enroll}>
+          <div className="form-group">
+            <label className="form-label" htmlFor="voice-enroll-name">Name</label>
+            <input id="voice-enroll-name" className="input" value={enrollName}
+              onChange={(e) => setEnrollName(e.target.value)} placeholder="e.g. Alice Johnson" />
+          </div>
+          <div className="form-group">
+            <label className="form-label" htmlFor="voice-enroll-labels">Labels <span className="form-label__hint">(optional, one per line)</span></label>
+            <textarea id="voice-enroll-labels" className="textarea" rows={2}
+              placeholder={"team: engineering\nrole: lead"}
+              value={enrollLabels} onChange={(e) => setEnrollLabels(e.target.value)} />
+          </div>
+          <MediaInput mode="audio" label="Sample clip" value={enrollAudio} onChange={setEnrollAudio} idPrefix="voice-enroll" />
+          <button type="submit" className="btn btn-primary btn-full" disabled={enrolling}>
+            {enrolling ? <><LoadingSpinner size="sm" /> Enrolling…</> : <><i className="fas fa-plus" /> Enroll</>}
+          </button>
+          {enrollErr && <div className="biometrics-enrollgrid__err"><ErrorWithTraceLink message={enrollErr} /></div>}
+        </form>
+      </section>
+
+      <section className="biometrics-enrollgrid__identify card">
+        <h2 className="biometrics-panel__title"><i className="fas fa-magnifying-glass" /> Identify a speaker</h2>
+        <form onSubmit={identify}>
+          <MediaInput mode="audio" label="Probe clip" value={probeAudio} onChange={setProbeAudio} idPrefix="voice-probe" />
+          <div className="form-grid-2col">
+            <div className="form-group">
+              <label className="form-label" htmlFor="voice-topk">Top-K</label>
+              <input id="voice-topk" type="number" min="1" max="25" className="input"
+                value={topK} onChange={(e) => setTopK(parseInt(e.target.value) || 1)} />
+            </div>
+            <div className="form-group">
+              <label className="form-label" htmlFor="voice-threshold-id">Threshold</label>
+              <input id="voice-threshold-id" type="number" min="0" max="1" step="0.01" className="input"
+                value={threshold} onChange={(e) => setThreshold(parseFloat(e.target.value) || 0)} />
+            </div>
+          </div>
+          <button type="submit" className="btn btn-primary btn-full" disabled={identifying || !probeAudio}>
+            {identifying ? <><LoadingSpinner size="sm" /> Searching…</> : <><i className="fas fa-magnifying-glass" /> Identify</>}
+          </button>
+          {identifyErr && <div className="biometrics-enrollgrid__err"><ErrorWithTraceLink message={identifyErr} /></div>}
+          {identifyResult && <MatchesList matches={identifyResult.matches || []} enrolled={enrolled} />}
+        </form>
+      </section>
+
+      <section className="biometrics-enrollgrid__list">
+        <div className="biometrics-enroll__head">
+          <h2 className="biometrics-panel__title"><i className="fas fa-id-badge" /> Enrolled <span className="biometrics-enroll__count">{enrolled.length}</span></h2>
+        </div>
+        <EnrollmentList entries={enrolled} onDelete={forget} mode="audio" highlightId={lastEnrolled} />
+      </section>
+    </div>
+  )
+}
+
+function MatchesList({ matches, enrolled }) {
+  if (!matches.length) {
+    return <div className="biometrics-matches__empty">No candidates above threshold.</div>
+  }
+  return (
+    <ul className="biometrics-matches" aria-label="Matches">
+      {matches.map((m, i) => {
+        const record = enrolled.find(e => e.id === m.id)
+        const conf = Math.max(0, Math.min(100, m.confidence ?? 0))
+        return (
+          <li key={m.id} className={`biometrics-matches__row ${m.match ? 'match' : 'miss'}`}>
+            <div className="biometrics-matches__rank">#{i + 1}</div>
+            <div className="biometrics-matches__avatar">
+              <span>{(m.name || '?').slice(0, 2).toUpperCase()}</span>
+            </div>
+            <div className="biometrics-matches__body">
+              <div className="biometrics-matches__name">
+                <strong>{m.name || m.id}</strong>
+                {m.match ? <span className="biometrics-matches__badge match"><i className="fas fa-check" /> match</span>
+                         : <span className="biometrics-matches__badge miss">below threshold</span>}
+              </div>
+              {record?.sampleUrl && (
+                <audio controls src={record.sampleUrl} className="biometrics-matches__preview" />
+              )}
+              <div className="biometrics-matches__meter" aria-hidden="true">
+                <div className="biometrics-matches__fill" style={{ width: `${conf}%` }} />
+              </div>
+              <div className="biometrics-matches__meta">
+                <span>distance <code>{m.distance?.toFixed?.(4) ?? '—'}</code></span>
+                <span>confidence <code>{conf.toFixed(1)}%</code></span>
+              </div>
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+// ──────────────────────────── Embedding ────────────────────────────
+
+function EmbedTab({ model, addToast }) {
+  const [audio, setAudio] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [result, setResult] = useState(null)
+  const [elapsedMs, setElapsedMs] = useState(null)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!model) { addToast('Select a speaker model first', 'warning'); return }
+    if (!audio) { addToast('Add an audio clip', 'warning'); return }
+    setLoading(true); setError(null); setResult(null)
+    const started = performance.now()
+    try {
+      const data = await voiceApi.embed({ model, audio: audio.dataUrl })
+      setElapsedMs(performance.now() - started)
+      setResult(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form className="biometrics-twocol" onSubmit={submit}>
+      <aside className="biometrics-panel">
+        <h2 className="biometrics-panel__title">Get a raw speaker embedding</h2>
+        <p className="biometrics-panel__note">
+          Returns a speaker-encoder vector — the same representation the backend uses internally for verify and identify.
+        </p>
+        <MediaInput mode="audio" label="Audio clip" value={audio} onChange={setAudio} idPrefix="voice-embed" />
+        <button type="submit" className="btn btn-primary btn-full" disabled={loading || !audio}>
+          {loading ? <><LoadingSpinner size="sm" /> Embedding…</> : <><i className="fas fa-code" /> Extract vector</>}
+        </button>
+      </aside>
+      <section className="biometrics-results">
+        {loading && <div className="biometrics-empty"><LoadingSpinner size="lg" /></div>}
+        {error && <ErrorWithTraceLink message={error} />}
+        {!loading && !error && !result && (
+          <EmptyState icon="fas fa-code"
+            title="Get a speaker embedding"
+            body="For developers — retrieve the raw vector for a voice to store, search, or cluster outside of LocalAI." />
+        )}
+        {result && (
+          <EmbeddingInspector embedding={result.embedding} dim={result.dim} model={result.model} elapsedMs={elapsedMs} />
+        )}
+      </section>
+    </form>
+  )
+}
+
+function EmptyState({ icon, title, body }) {
+  return (
+    <div className="biometrics-empty">
+      <i className={icon} aria-hidden="true" />
+      <h3>{title}</h3>
+      <p>{body}</p>
+    </div>
+  )
+}
+
+function ResponseDetails({ data }) {
+  return (
+    <details className="biometrics-response">
+      <summary><i className="fas fa-angle-right" aria-hidden="true" /> Raw response</summary>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </details>
+  )
+}
diff --git a/core/http/react-ui/src/router.jsx b/core/http/react-ui/src/router.jsx
index a753b10e933a..fd9e99f77c5e 100644
--- a/core/http/react-ui/src/router.jsx
+++ b/core/http/react-ui/src/router.jsx
@@ -34,6 +34,8 @@ import Login from './pages/Login'
 import FineTune from './pages/FineTune'
 import Quantize from './pages/Quantize'
 import Studio from './pages/Studio'
+import FaceRecognition from './pages/FaceRecognition'
+import VoiceRecognition from './pages/VoiceRecognition'
 import Nodes from './pages/Nodes'
 import NodeBackendLogs from './pages/NodeBackendLogs'
 import NotFound from './pages/NotFound'
@@ -73,6 +75,10 @@ const appChildren = [
   { path: 'sound/:model', element: <Sound /> },
   { path: 'studio', element: <Studio /> },
   { path: 'talk', element: <Talk /> },
+  { path: 'face', element: <Feature feature="face_recognition"><FaceRecognition /></Feature> },
+  { path: 'face/:model', element: <Feature feature="face_recognition"><FaceRecognition /></Feature> },
+  { path: 'voice', element: <Feature feature="voice_recognition"><VoiceRecognition /></Feature> },
+  { path: 'voice/:model', element: <Feature feature="voice_recognition"><VoiceRecognition /></Feature> },
   { path: 'usage', element: <Usage /> },
   { path: 'account', element: <Account /> },
   { path: 'users', element: <Admin><Users /></Admin> },
diff --git a/core/http/react-ui/src/utils/api.js b/core/http/react-ui/src/utils/api.js
index 510349e3cbc6..b711b0593dde 100644
--- a/core/http/react-ui/src/utils/api.js
+++ b/core/http/react-ui/src/utils/api.js
@@ -259,6 +259,26 @@ export const audioApi = {
   },
 }
 
+// Face biometrics — backend spec: core/http/endpoints/localai/face_*.go
+export const faceApi = {
+  verify: (body) => postJSON(API_CONFIG.endpoints.faceVerify, body),
+  analyze: (body) => postJSON(API_CONFIG.endpoints.faceAnalyze, body),
+  embed: (body) => postJSON(API_CONFIG.endpoints.faceEmbed, body),
+  register: (body) => postJSON(API_CONFIG.endpoints.faceRegister, body),
+  identify: (body) => postJSON(API_CONFIG.endpoints.faceIdentify, body),
+  forget: (body) => postJSON(API_CONFIG.endpoints.faceForget, body),
+}
+
+// Voice biometrics — backend spec: core/http/endpoints/localai/voice_*.go
+export const voiceApi = {
+  verify: (body) => postJSON(API_CONFIG.endpoints.voiceVerify, body),
+  analyze: (body) => postJSON(API_CONFIG.endpoints.voiceAnalyze, body),
+  embed: (body) => postJSON(API_CONFIG.endpoints.voiceEmbed, body),
+  register: (body) => postJSON(API_CONFIG.endpoints.voiceRegister, body),
+  identify: (body) => postJSON(API_CONFIG.endpoints.voiceIdentify, body),
+  forget: (body) => postJSON(API_CONFIG.endpoints.voiceForget, body),
+}
+
 // Realtime / WebRTC
 export const realtimeApi = {
   call: (body) => postJSON(API_CONFIG.endpoints.realtimeCalls, body),
diff --git a/core/http/react-ui/src/utils/config.js b/core/http/react-ui/src/utils/config.js
index 1bde02e9646c..0ca375b7d96b 100644
--- a/core/http/react-ui/src/utils/config.js
+++ b/core/http/react-ui/src/utils/config.js
@@ -73,6 +73,23 @@ export const API_CONFIG = {
     audioTranscriptions: '/v1/audio/transcriptions',
     soundGeneration: '/v1/sound-generation',
     embeddings: '/v1/embeddings',
+
+    // Face biometrics
+    faceVerify: '/v1/face/verify',
+    faceAnalyze: '/v1/face/analyze',
+    faceEmbed: '/v1/face/embed',
+    faceRegister: '/v1/face/register',
+    faceIdentify: '/v1/face/identify',
+    faceForget: '/v1/face/forget',
+
+    // Voice biometrics
+    voiceVerify: '/v1/voice/verify',
+    voiceAnalyze: '/v1/voice/analyze',
+    voiceEmbed: '/v1/voice/embed',
+    voiceRegister: '/v1/voice/register',
+    voiceIdentify: '/v1/voice/identify',
+    voiceForget: '/v1/voice/forget',
+
     modelsList: '/v1/models',
     modelsCapabilities: '/api/models/capabilities',
 

From 7cbccd264511880928d2cb2defb0ae9a82a7a42f Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:17:20 +0000
Subject: [PATCH 2/9] fix(localai): accept data URI prefixes with codec/charset
 params

Browser MediaRecorder produces data URIs like
  data:audio/webm;codecs=opus;base64,...
so the pre-';base64,' section can carry multiple parameter
segments. The `^data:([^;]+);base64,` regex in pkg/utils/base64.go
and core/http/endpoints/localai/audio.go only matched exactly one
segment, so recordings straight from the React UI's live-capture
tab failed the strip and then tripped the base64 decoder on the
leading 'data:' literal, surfacing as
  "invalid audio base64: illegal base64 data at input byte 4"

Widened both regexes to `^data:[^,]+?;base64,` so any number of
';param=value' segments between the mime type and ';base64,' are
tolerated. Added a regression test covering the MediaRecorder
shape.

Assisted-by: Claude:Opus 4.7
---
 core/http/endpoints/localai/audio.go | 8 +++++++-
 pkg/utils/base64.go                  | 8 +++++++-
 pkg/utils/base64_test.go             | 9 +++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/core/http/endpoints/localai/audio.go b/core/http/endpoints/localai/audio.go
index f9da798599c6..e8a43b04c627 100644
--- a/core/http/endpoints/localai/audio.go
+++ b/core/http/endpoints/localai/audio.go
@@ -14,7 +14,13 @@ import (
 	"github.com/mudler/LocalAI/pkg/utils"
 )
 
-var audioDataURIPattern = regexp.MustCompile(`^data:([^;]+);base64,`)
+// Match `data:<mime>[;param=value...];base64,` — MediaRecorder in the browser
+// produces data URIs like `data:audio/webm;codecs=opus;base64,...`, so the
+// pre-`;base64,` section can contain zero or more parameter segments. The
+// old `([^;]+)` form only matched exactly one segment and left recordings
+// from the React UI's live-capture tab unparsed, which then failed base64
+// decoding on the leading `data:` bytes.
+var audioDataURIPattern = regexp.MustCompile(`^data:[^,]+?;base64,`)
 
 var audioDownloadClient = http.Client{Timeout: 30 * time.Second}
 
diff --git a/pkg/utils/base64.go b/pkg/utils/base64.go
index 905495a18d87..c397113090b0 100644
--- a/pkg/utils/base64.go
+++ b/pkg/utils/base64.go
@@ -16,7 +16,13 @@ var base64DownloadClient http.Client = http.Client{
 	Timeout: 30 * time.Second,
 }
 
-var dataURIPattern = regexp.MustCompile(`^data:([^;]+);base64,`)
+// Match `data:<mime>[;param=value...];base64,` — browser-produced data URIs
+// often carry codec/charset params between the mime type and `;base64,`
+// (e.g. MediaRecorder's `data:audio/webm;codecs=opus;base64,...`). The old
+// `([^;]+)` form only tolerated exactly one segment, so anything with
+// extra params failed the strip and tripped the downstream base64 decoder
+// on the `data:` literal.
+var dataURIPattern = regexp.MustCompile(`^data:[^,]+?;base64,`)
 
 // GetContentURIAsBase64 checks if the string is an URL, if it's an URL downloads the content in memory encodes it in base64 and returns the base64 string, otherwise returns the string by stripping base64 data headers
 func GetContentURIAsBase64(s string) (string, error) {
diff --git a/pkg/utils/base64_test.go b/pkg/utils/base64_test.go
index 5ab86f1d145c..f1e5ced48aad 100644
--- a/pkg/utils/base64_test.go
+++ b/pkg/utils/base64_test.go
@@ -21,6 +21,15 @@ var _ = Describe("utils/base64 tests", func() {
 		Expect(err).To(BeNil())
 		Expect(b64).To(Equal("BAR"))
 	})
+	It("GetContentURIAsBase64 strips data URI prefixes with codec/charset params", func() {
+		// Browser MediaRecorder produces data URIs like
+		// `data:audio/webm;codecs=opus;base64,...` — the regex must accept
+		// any number of MIME parameters between the type and `;base64,`.
+		input := "data:audio/webm;codecs=opus;base64,PAYLOAD"
+		b64, err := GetContentURIAsBase64(input)
+		Expect(err).To(BeNil())
+		Expect(b64).To(Equal("PAYLOAD"))
+	})
 	It("GetImageURLAsBase64 returns an error for bogus data", func() {
 		input := "FOO"
 		b64, err := GetContentURIAsBase64(input)

From e4987216d19ddc38d50e946aee2f2dad987359e0 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:17:34 +0000
Subject: [PATCH 3/9] fix(insightface): scope pack ONNX loading to known
 manifests

LocalAI's gallery extracts buffalo_* zips flat into the models
directory, which inevitably mixes with ONNX files from other
backends (opencv face engine, MiniFASNet antispoof, WeSpeaker
voice embedding) and older buffalo pack installs. Feeding those
foreign files into insightface's model_zoo.get_model() blows up
inside the router -- it assumes a 4-D NCHW input and indexes
`input_shape[2]` on tensors that aren't shaped like a face model,
raising IndexError mid-load and leaving the backend unusable.

The router's dispatch isn't amenable to per-file try/except alone
(first-file-wins picks det_10g.onnx from buffalo_l even when the
user asked for buffalo_sc -- alphabetical order happens to favour
the wrong pack). Instead, ship an explicit manifest of the
upstream v0.7 pack contents and scope the glob to that when the
requested pack is known. The manifest is small and stable; future
packs can be added alongside or fall through to the tolerance
loop, which also swallows any remaining IndexError / ValueError
from foreign files with a clear `[insightface] skipped` stderr
line for diagnostics.

Assisted-by: Claude:Opus 4.7
---
 backend/python/insightface/engines.py | 58 ++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/backend/python/insightface/engines.py b/backend/python/insightface/engines.py
index 5055d503edfa..b8c814cf639a 100644
--- a/backend/python/insightface/engines.py
+++ b/backend/python/insightface/engines.py
@@ -173,6 +173,30 @@ def _build_antispoofer(options: dict[str, str], model_dir: str | None) -> Antisp
 
 # ─── InsightFaceEngine ────────────────────────────────────────────────
 
+# Canonical ONNX manifest for each upstream insightface pack (v0.7 release
+# at github.com/deepinsight/insightface/releases). LocalAI's gallery extracts
+# these zips flat into the models directory, so when multiple packs or other
+# backends drop their own ONNX files alongside, the glob-the-directory
+# approach picks up foreign files and insightface's model_zoo.get_model()
+# raises IndexError trying to index `input_shape[2]` on a tensor that isn't
+# shaped like a face model. The manifest lets us pre-filter to only the
+# files that actually belong to the requested pack — deterministic, correct
+# pack choice, no crashes on neighbour ONNX files.
+_KNOWN_PACK_MANIFESTS: dict[str, frozenset[str]] = {
+    "buffalo_l": frozenset({
+        "det_10g.onnx",
+        "w600k_r50.onnx",
+        "genderage.onnx",
+        "2d106det.onnx",
+        "1k3d68.onnx",
+    }),
+    "buffalo_sc": frozenset({
+        "det_500m.onnx",
+        "w600k_mbf.onnx",
+    }),
+}
+
+
 class InsightFaceEngine:
     """Drives insightface's model_zoo directly — no FaceAnalysis wrapper.
 
@@ -222,6 +246,21 @@ def prepare(self, options: dict[str, str]) -> None:
             )
 
         onnx_files = sorted(glob.glob(os.path.join(pack_dir, "*.onnx")))
+        # When the pack extracts flat into a shared models directory it
+        # mixes with ONNX files from other backends (opencv face engine,
+        # MiniFASNet antispoof, WeSpeaker voice embedding, other buffalo
+        # packs installed earlier). Feeding those into model_zoo.get_model()
+        # blows up inside insightface's router — it assumes a 4-D NCHW
+        # input and indexes `input_shape[2]` on tensors that aren't shaped
+        # like a face model, raising IndexError. For the upstream packs we
+        # know the exact ONNX manifest; scoping to it makes the load
+        # deterministic (without it, det_10g.onnx from buffalo_l sorts
+        # before det_500m.onnx from buffalo_sc and silently wins).
+        manifest = _KNOWN_PACK_MANIFESTS.get(self.model_pack)
+        if manifest is not None:
+            scoped = [f for f in onnx_files if os.path.basename(f) in manifest]
+            if scoped:
+                onnx_files = scoped
         if not onnx_files:
             raise ValueError(f"no ONNX files in pack directory: {pack_dir}")
 
@@ -231,14 +270,31 @@ def prepare(self, options: dict[str, str]) -> None:
         self._providers = ["CUDAExecutionProvider", "CPUExecutionProvider"]
 
         self.models = {}
+        skipped: list[tuple[str, str]] = []
         for onnx_file in onnx_files:
-            m = model_zoo.get_model(onnx_file, providers=self._providers)
+            try:
+                m = model_zoo.get_model(onnx_file, providers=self._providers)
+            except Exception as err:
+                # Foreign ONNX (wrong rank/shape, non-insightface model) —
+                # older insightface versions raise IndexError / ValueError
+                # instead of returning None. Keep loading the rest.
+                skipped.append((os.path.basename(onnx_file), str(err)))
+                continue
             if m is None:
+                skipped.append((os.path.basename(onnx_file), "unknown taskname"))
                 continue
             # First occurrence of each taskname wins (matches FaceAnalysis).
             if m.taskname not in self.models:
                 self.models[m.taskname] = m
 
+        if skipped:
+            import sys
+            print(
+                f"[insightface] skipped {len(skipped)} non-pack ONNX file(s) in {pack_dir}: "
+                + ", ".join(f"{n} ({why})" for n, why in skipped),
+                file=sys.stderr,
+            )
+
         if "detection" not in self.models:
             raise ValueError(f"no detector (taskname='detection') found in {pack_dir}")
         self.det_model = self.models["detection"]

From d6849a26959f9abd243ceb2e57090dbb46ca7744 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:17:48 +0000
Subject: [PATCH 4/9] fix(speaker-recognition): extract FBank features for
 rank-3 ONNX encoders

Pre-exported speaker-encoder ONNX graphs come in two shapes:

  rank-2  [batch, samples]           -- some 3D-Speaker exports,
                                        take raw waveform directly.
  rank-3  [batch, frames, n_mels]    -- WeSpeaker and most Kaldi-
                                        lineage encoders, expect
                                        pre-computed Kaldi FBank.

OnnxDirectEngine unconditionally fed `audio.reshape(1, -1)` --
correct for rank-2, IndexError-on-input_shape[3] on rank-3, which
surfaced to the UI as
  "Invalid rank for input: feats Got: 2 Expected: 3"

Detect the input rank at session init and run Kaldi FBank
(80-dim, 25ms/10ms frames, dither=0.0, per-utterance CMN) before
the forward pass when rank>=3. All knobs are configurable via
backend options for encoders that deviate from defaults.

torchaudio.compliance.kaldi is already in the backend's
requirements (SpeechBrain pulls torchaudio in), so no new
dependency.

Assisted-by: Claude:Opus 4.7
---
 backend/python/speaker-recognition/engines.py | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/backend/python/speaker-recognition/engines.py b/backend/python/speaker-recognition/engines.py
index ef52f02479dd..85df80becfe2 100644
--- a/backend/python/speaker-recognition/engines.py
+++ b/backend/python/speaker-recognition/engines.py
@@ -317,8 +317,23 @@ def __init__(self, model_name: str, options: dict[str, str]):
         else:
             provider_list = ["CPUExecutionProvider"]
         self._session = ort.InferenceSession(onnx_path, providers=provider_list)
-        self._input_name = self._session.get_inputs()[0].name
+        input_meta = self._session.get_inputs()[0]
+        self._input_name = input_meta.name
+        # Pre-exported speaker encoders come in two shapes:
+        #   rank-2  [batch, samples]          — some 3D-Speaker exports feed raw waveform.
+        #   rank-3  [batch, frames, n_mels]   — WeSpeaker and most Kaldi-lineage encoders
+        #                                        expect pre-computed Kaldi FBank features.
+        # We detect this at load time and branch in embed(), because feeding raw audio
+        # into a rank-3 graph is exactly what triggered
+        # "Invalid rank for input: feats Got: 2 Expected: 3".
+        self._input_rank = len(input_meta.shape) if input_meta.shape is not None else 2
         self._expected_sr = int(options.get("sample_rate", "16000"))
+        self._fbank_mels = int(options.get("fbank_num_mel_bins", "80"))
+        self._fbank_frame_length_ms = float(options.get("fbank_frame_length_ms", "25"))
+        self._fbank_frame_shift_ms = float(options.get("fbank_frame_shift_ms", "10"))
+        # Per-utterance cepstral mean normalisation — on for WeSpeaker by default,
+        # toggleable for encoders that expect raw FBank.
+        self._fbank_cmn = options.get("fbank_cmn", "true").lower() in ("1", "true", "yes")
         self._analysis = AnalysisHead(options)
 
     def _load_waveform(self, path: str):
@@ -344,11 +359,37 @@ def embed(self, audio_path: str) -> list[float]:
         import numpy as np
 
         audio = self._load_waveform(audio_path)
-        feed = audio.reshape(1, -1)
+        if self._input_rank >= 3:
+            feats = self._extract_fbank(audio)        # [frames, n_mels]
+            feed = feats[np.newaxis, :, :]             # [1, frames, n_mels]
+        else:
+            feed = audio.reshape(1, -1)                # [1, samples]
         out = self._session.run(None, {self._input_name: feed})
         vec = np.asarray(out[0]).reshape(-1)
         return [float(x) for x in vec]
 
+    def _extract_fbank(self, audio):
+        """Compute Kaldi-style 80-dim FBank features for speaker encoders that
+        expect pre-featurised input (WeSpeaker, most 3D-Speaker exports).
+        torchaudio is already a backend dependency for SpeechBrain — no new
+        package required."""
+        import numpy as np
+        import torch  # type: ignore
+        import torchaudio.compliance.kaldi as kaldi  # type: ignore
+
+        tensor = torch.from_numpy(audio).unsqueeze(0)  # [1, samples]
+        feats = kaldi.fbank(
+            tensor,
+            sample_frequency=self._expected_sr,
+            num_mel_bins=self._fbank_mels,
+            frame_length=self._fbank_frame_length_ms,
+            frame_shift=self._fbank_frame_shift_ms,
+            dither=0.0,
+        )  # [frames, n_mels]
+        if self._fbank_cmn:
+            feats = feats - feats.mean(dim=0, keepdim=True)
+        return feats.numpy().astype(np.float32)
+
     def compare(self, audio1: str, audio2: str) -> float:
         return _cosine_distance(self.embed(audio1), self.embed(audio2))
 

From 34afa0b2a22fa23c09d91087528615a7ceb01029 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:18:02 +0000
Subject: [PATCH 5/9] fix(biometrics): isolate face and voice vector stores

Face (ArcFace, 512-D) and voice (ECAPA-TDNN 192-D / WeSpeaker
256-D) biometric embeddings were colliding inside a single
in-memory local-store instance. Enrolling one after the other
failed with
  "Try to add key with length N when existing length is M"
because local-store correctly refuses to mix dimensions in one
keyspace.

The registries were constructed with `storeName=""`, which in
StoreBackend() is just a WithModel() call. But ModelLoader's
cache is keyed on `modelID`, not `model` -- so both registries
collapsed to the same `modelID=""` slot and reused the same
backend process despite looking isolated on paper.

Three complementary fixes:

  1. application.go -- give each registry a distinct default
     namespace ("localai-face-biometrics" /
     "localai-voice-biometrics"). The comment claimed
     isolation, now it's actually enforced.

  2. stores.go -- pass the storeName as both WithModelID and
     WithModel so the ModelLoader cache key separates
     namespaces and the loader spawns distinct processes.

  3. local-store/store.go -- drop the Load() `opts.Model != ""`
     guard. It was there to prevent generic model-loading loops
     from picking up local-store by accident, but that auto-load
     path is being retired; the guard now just blocks legitimate
     namespace isolation. opts.Model is treated as a tag; the
     per-tuple process isolation upstream handles discrimination.

Assisted-by: Claude:Opus 4.7
---
 backend/go/local-store/store.go | 14 ++++++++++----
 core/application/application.go | 20 ++++++++++++++++----
 core/backend/stores.go          |  9 +++++++++
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/backend/go/local-store/store.go b/backend/go/local-store/store.go
index b48c2e919315..e2ad540987ad 100644
--- a/backend/go/local-store/store.go
+++ b/backend/go/local-store/store.go
@@ -4,7 +4,6 @@ package main
 // It is meant to be used by the main executable that is the server for the specific backend type (falcon, gpt3, etc)
 import (
 	"container/heap"
-	"errors"
 	"fmt"
 	"math"
 	"slices"
@@ -100,9 +99,16 @@ func sortIntoKeySlicese(keys []*pb.StoresKey) [][]float32 {
 }
 
 func (s *Store) Load(opts *pb.ModelOptions) error {
-	if opts.Model != "" {
-		return errors.New("not implemented")
-	}
+	// local-store is an in-memory vector store with no on-disk artefact to
+	// load — opts.Model is just a namespace identifier. The old `!= ""` guard
+	// rejected any non-empty model name with "not implemented", which broke
+	// callers that pass a namespace to isolate embedding spaces (face vs.
+	// voice biometrics both go through local-store but need distinct stores
+	// so ArcFace 512-D and ECAPA-TDNN 192-D don't collide). Namespace
+	// isolation is already handled upstream: ModelLoader spawns a fresh
+	// local-store process per (backend, model) tuple, so each namespace is
+	// its own Store{} instance. Nothing to do here beyond accepting the load.
+	_ = opts
 	return nil
 }
 
diff --git a/core/application/application.go b/core/application/application.go
index b1c4ef86a4c5..22162fd1932e 100644
--- a/core/application/application.go
+++ b/core/application/application.go
@@ -81,18 +81,30 @@ func newApplication(appConfig *config.ApplicationConfig) *Application {
 	// The resolver closes over the ModelLoader so the Registry stays
 	// decoupled from loader plumbing; swapping in a postgres-backed
 	// implementation later is a single construction change here.
+	//
+	// `faceStoreName` is the default namespace passed to StoreBackend when
+	// the request doesn't override it. Face and voice MUST use distinct
+	// namespaces — the local-store gRPC surface rejects mixed dimensions
+	// inside one namespace ("Try to add key with length N when existing
+	// length is M"). ArcFace buffalo_l produces 512-dim embeddings while
+	// ECAPA-TDNN produces 192-dim; enrolling one after the other into a
+	// shared namespace is exactly how we hit that error.
+	const (
+		faceStoreName  = "localai-face-biometrics"
+		voiceStoreName = "localai-voice-biometrics"
+	)
 	faceStoreResolver := func(_ context.Context, storeName string) (pkggrpc.Backend, error) {
 		return corebackend.StoreBackend(ml, appConfig, storeName, "")
 	}
-	app.faceRegistry = facerecognition.NewStoreRegistry(faceStoreResolver, "", faceEmbeddingDim)
+	app.faceRegistry = facerecognition.NewStoreRegistry(faceStoreResolver, faceStoreName, faceEmbeddingDim)
 
 	// Voice (speaker) recognition registry — same plumbing, separate
-	// registry so embedding spaces stay isolated (a face vector and a
-	// speaker vector are not comparable).
+	// namespace so embedding spaces stay isolated (a face vector and a
+	// speaker vector are not comparable and differ in dimensionality).
 	voiceStoreResolver := func(_ context.Context, storeName string) (pkggrpc.Backend, error) {
 		return corebackend.StoreBackend(ml, appConfig, storeName, "")
 	}
-	app.voiceRegistry = voicerecognition.NewStoreRegistry(voiceStoreResolver, "", voiceEmbeddingDim)
+	app.voiceRegistry = voicerecognition.NewStoreRegistry(voiceStoreResolver, voiceStoreName, voiceEmbeddingDim)
 
 	return app
 }
diff --git a/core/backend/stores.go b/core/backend/stores.go
index 78257180e93c..2fd4cc148989 100644
--- a/core/backend/stores.go
+++ b/core/backend/stores.go
@@ -11,8 +11,17 @@ func StoreBackend(sl *model.ModelLoader, appConfig *config.ApplicationConfig, st
 	if backend == "" {
 		backend = model.LocalStoreBackend
 	}
+	// ModelLoader caches backend processes by `modelID`, not by the `model`
+	// passed via WithModel. Without a distinct modelID, every StoreBackend
+	// call collapses to the same `modelID=""` cache slot — face (512-D) and
+	// voice (192-D) biometrics would then share the same local-store process
+	// and the second enrollment would fail with
+	//   Try to add key with length N when existing length is M
+	// Use the store namespace as modelID so each namespace gets its own
+	// process instance and its own in-memory Store{}.
 	sc := []model.Option{
 		model.WithBackendString(backend),
+		model.WithModelID(storeName),
 		model.WithModel(storeName),
 	}
 

From 32b3e3e4e5932a6fd3ad4b75751861f87bb8d311 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:18:21 +0000
Subject: [PATCH 6/9] fix(gallery): stale-file cleanup and upgrade-tmp
 directory safety

Two related robustness fixes for backend install/upgrade:

pkg/downloader/uri.go
  OCI downloads passed through
      if filepath.Ext(filePath) != "" ...
          filePath = filepath.Dir(filePath)
  which was intended to redirect file-shaped download targets
  into their parent directory for OCI extraction. The heuristic
  misfires on directory-shaped paths with a dot-suffix --
  gallery.UpgradeBackend uses
      tmpPath = "<backendsPath>/<name>.upgrade-tmp"
  and Go's filepath.Ext treats ".upgrade-tmp" as an extension.
  The rewrite landed the extraction at "<backendsPath>/", which
  then **overwrote the real install** (backends/<name>/) with a
  flat-layout file and left a stray run.sh at the top level. The
  tmp dir itself stayed empty, so the validation step that
  checked "<tmpPath>/run.sh" predictably failed with
      "upgrade validation failed: run.sh not found in new backend"
  Every manual upgrade silently corrupted the backends tree this
  way. Guard the rewrite behind "target isn't already an existing
  directory" -- InstallBackend / UpgradeBackend both pre-create
  the target as a directory, so they get the correct behaviour;
  existing file-path callers with a genuine dot-extension still
  get the parent redirect.

core/gallery/backends.go
  InstallBackend's MkdirAll returned ENOTDIR when something at
  the target path was already a file (legacy dev builds dropped
  golang backend binaries directly at `<backendsPath>/<name>`
  instead of nesting them under their own subdir). That
  permanently blocked reinstall and upgrade for anyone carrying
  that state, since every retry hit the same error. Detect a
  pre-existing non-directory, warn, and remove it before the
  MkdirAll so the fresh install can write the correct nested
  layout with metadata.json + run.sh.

Assisted-by: Claude:Opus 4.7
---
 core/gallery/backends.go | 14 ++++++++++++++
 pkg/downloader/uri.go    | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/core/gallery/backends.go b/core/gallery/backends.go
index 6bf8c5d143ed..ca9b07dfd051 100644
--- a/core/gallery/backends.go
+++ b/core/gallery/backends.go
@@ -194,6 +194,20 @@ func InstallBackend(ctx context.Context, systemState *system.SystemState, modelL
 
 	name := config.Name
 	backendPath := filepath.Join(systemState.Backend.BackendsPath, name)
+	// Clean up legacy flat-layout artefacts: earlier dev builds of the
+	// golang backends dropped the compiled binary directly at
+	// `<backendsPath>/<name>` (a plain file) instead of
+	// `<backendsPath>/<name>/<name>` (the nested layout the current code
+	// expects). MkdirAll below returns ENOTDIR when such a stale file
+	// exists, permanently blocking any reinstall or upgrade. Remove the
+	// file first so the install can proceed; the new install will write
+	// the correct nested layout, including metadata.json + run.sh.
+	if fi, statErr := os.Lstat(backendPath); statErr == nil && !fi.IsDir() {
+		xlog.Warn("removing stale non-directory backend artefact to make room for fresh install", "path", backendPath)
+		if rmErr := os.Remove(backendPath); rmErr != nil {
+			return fmt.Errorf("failed to remove stale backend artefact at %s: %w", backendPath, rmErr)
+		}
+	}
 	err = os.MkdirAll(backendPath, 0750)
 	if err != nil {
 		return fmt.Errorf("failed to create base path: %v", err)
diff --git a/pkg/downloader/uri.go b/pkg/downloader/uri.go
index ed5d6080e3ee..044d5d6114e2 100644
--- a/pkg/downloader/uri.go
+++ b/pkg/downloader/uri.go
@@ -375,9 +375,20 @@ func (uri URI) DownloadFileWithContext(ctx context.Context, filePath, sha string
 	if uri.LooksLikeOCI() {
 
 		// Only Ollama wants to download to the file, for the rest, we want to download to the directory
-		// so we check if filepath has any extension, otherwise we assume it's a directory
-		if filepath.Ext(filePath) != "" && !strings.HasPrefix(url, OllamaPrefix) {
-			filePath = filepath.Dir(filePath)
+		// so we check if filepath has any extension, otherwise we assume it's a directory.
+		// Caveat: `filepath.Ext` treats any dot-suffix as an extension, so paths like
+		// `backends/local-store.upgrade-tmp` (the tmp dir created by gallery.UpgradeBackend)
+		// look like a "file" to this heuristic and get rewritten to their parent — which
+		// then unpacks the image at `backends/` top level and clobbers the real install
+		// with a flat-layout file. Guard against that by short-circuiting when the caller
+		// has already created the target as a directory: OCI destinations are always dirs
+		// in that case, regardless of what their suffix looks like.
+		if !strings.HasPrefix(url, OllamaPrefix) {
+			if fi, statErr := os.Stat(filePath); statErr == nil && fi.IsDir() {
+				// Existing directory — use as-is.
+			} else if filepath.Ext(filePath) != "" {
+				filePath = filepath.Dir(filePath)
+			}
 		}
 
 		progressStatus := func(desc ocispec.Descriptor) io.Writer {

From 85d813e3022c13e91f0526a265f4b833df56a39f Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:18:33 +0000
Subject: [PATCH 7/9] fix(galleryop): refresh upgrade cache after backend ops

UpgradeChecker caches the last upgrade-check result and only
refreshes on the 6-hour tick or after an auto-upgrade cycle.
Manual upgrades (POST /api/backends/upgrade/:name) go through
the async galleryop worker, which completes the upgrade
correctly but never tells UpgradeChecker to re-check -- so
/api/backends/upgrades continued to list a just-upgraded backend
as upgradeable, indistinguishable from a failed upgrade, for up
to six hours.

Add an optional `OnBackendOpCompleted func()` hook on
GalleryService that fires after every successful install /
upgrade / delete on the backend channel (async, so a slow
callback doesn't stall the queue). startup.go wires it to
UpgradeChecker.TriggerCheck after both services exist. Result:
the upgrade banner clears within milliseconds of the worker
finishing.

Assisted-by: Claude:Opus 4.7
---
 core/application/startup.go        |  6 ++++++
 core/services/galleryop/service.go | 12 ++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/core/application/startup.go b/core/application/startup.go
index 241ea8b224ae..b0484d0a9d40 100644
--- a/core/application/startup.go
+++ b/core/application/startup.go
@@ -242,6 +242,12 @@ func New(opts ...config.AppOption) (*Application, error) {
 		bmFn := func() galleryop.BackendManager { return application.GalleryService().BackendManager() }
 		uc := NewUpgradeChecker(options, application.ModelLoader(), application.distributedDB(), bmFn)
 		application.upgradeChecker = uc
+		// Refresh the upgrade cache the moment a backend op finishes — otherwise
+		// the UI keeps showing a just-upgraded backend as upgradeable until the
+		// next 6-hour tick. TriggerCheck is non-blocking.
+		if gs := application.GalleryService(); gs != nil {
+			gs.OnBackendOpCompleted = uc.TriggerCheck
+		}
 		go uc.Run(options.Context)
 	}
 
diff --git a/core/services/galleryop/service.go b/core/services/galleryop/service.go
index 3d77d11d6e16..b6e1510c819e 100644
--- a/core/services/galleryop/service.go
+++ b/core/services/galleryop/service.go
@@ -28,6 +28,13 @@ type GalleryService struct {
 	// Distributed mode (nil when not in distributed mode)
 	natsClient   messaging.Publisher
 	galleryStore *distributed.GalleryStore
+
+	// OnBackendOpCompleted is fired after every successful install/upgrade/delete
+	// on the backend channel. The Application wires this to UpgradeChecker.TriggerCheck
+	// so `/api/backends/upgrades` stops surfacing a backend as upgradeable the moment
+	// the worker finishes — previously the cache only refreshed on the 6-hour tick,
+	// making manual upgrades look like they failed even when they hadn't.
+	OnBackendOpCompleted func()
 }
 
 func NewGalleryService(appConfig *config.ApplicationConfig, ml *model.ModelLoader) *GalleryService {
@@ -245,6 +252,11 @@ func (g *GalleryService) Start(c context.Context, cl *config.ModelConfigLoader,
 				err := g.backendHandler(&op, systemState)
 				if err != nil {
 					updateError(op.ID, err)
+				} else if g.OnBackendOpCompleted != nil {
+					// Let listeners (e.g. UpgradeChecker) refresh their view of
+					// installed state. Run off the worker goroutine so a slow
+					// callback doesn't stall the next queued operation.
+					go g.OnBackendOpCompleted()
 				}
 				g.removeCancellation(op.ID)
 

From 0637dbb8cf51b8e725d5b229dc6a3f9ae4c55f5f Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:18:42 +0000
Subject: [PATCH 8/9] build: prepend GOPATH/bin to PATH for protogen-go

install-go-tools runs `go install` for protoc-gen-go and
protoc-gen-go-grpc, which writes them into `go env GOPATH`/bin.
That directory isn't on every dev's PATH, and protoc resolves
its code-gen plugins via PATH, so the immediately-following
protoc invocation fails with
  "protoc-gen-go: program not found"
which in turn blocks `make build` and any
`make backends/%` target that depends on build.

Prepend `go env GOPATH`/bin to PATH for the protoc invocation
so the freshly-installed plugins are found without requiring a
shell-profile change.

Assisted-by: Claude:Opus 4.7
---
 Makefile | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 578d119a73fd..43f66f5cb3d3 100644
--- a/Makefile
+++ b/Makefile
@@ -394,7 +394,13 @@ protoc:
 .PHONY: protogen-go
 protogen-go: protoc install-go-tools
 	mkdir -p pkg/grpc/proto
-	./protoc --experimental_allow_proto3_optional -Ibackend/ --go_out=pkg/grpc/proto/ --go_opt=paths=source_relative --go-grpc_out=pkg/grpc/proto/ --go-grpc_opt=paths=source_relative \
+	# install-go-tools writes protoc-gen-go and protoc-gen-go-grpc into
+	# $(shell go env GOPATH)/bin, which isn't on every dev's PATH. protoc
+	# resolves its code-gen plugins via PATH, so without this prefix the
+	# generate step fails with "protoc-gen-go: program not found". Prepend
+	# GOPATH/bin so the freshly-installed plugins win without requiring a
+	# shell-profile change.
+	PATH="$$(go env GOPATH)/bin:$$PATH" ./protoc --experimental_allow_proto3_optional -Ibackend/ --go_out=pkg/grpc/proto/ --go_opt=paths=source_relative --go-grpc_out=pkg/grpc/proto/ --go-grpc_opt=paths=source_relative \
     backend/backend.proto
 
 core/config/inference_defaults.json: ## Fetch inference defaults from unsloth (only if missing)

From cb6aafbb0e839596e5f396adf5af40533099bff0 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 23 Apr 2026 23:27:23 +0000
Subject: [PATCH 9/9] refactor(ui-api): non-blocking backend upgrade handler
 with opcache
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

POST /api/backends/upgrade/:name used to send the ManagementOp
directly onto the unbuffered BackendGalleryChannel, which blocked
the HTTP request whenever the galleryop worker was busy with a
prior operation. The op also didn't show up in /api/operations,
so the Backends UI couldn't reflect upgrade progress on the
affected row.

Register the op in opcache immediately, wrap it in a cancellable
context, store the cancellation function on the GalleryService,
and push onto the channel from a goroutine so the handler
returns right away. Response gains a `jobID` field and a
`message` string so clients have a consistent handle regardless
of whether the op is queued or running.

Pairs with the OnBackendOpCompleted hook added in the galleryop
commit — together the UI sees the upgrade start, watches
progress via /api/operations, and drops the "upgradeable" flag
the moment the worker finishes.

Assisted-by: Claude:Opus 4.7
---
 core/http/routes/ui_api.go | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/core/http/routes/ui_api.go b/core/http/routes/ui_api.go
index 159b535f5ba9..4c76a5906977 100644
--- a/core/http/routes/ui_api.go
+++ b/core/http/routes/ui_api.go
@@ -1303,21 +1303,39 @@ func RegisterUIAPIRoutes(app *echo.Echo, cl *config.ModelConfigLoader, ml *model
 			})
 		}
 
-		uid, err := uuid.NewUUID()
+		id, err := uuid.NewUUID()
 		if err != nil {
 			return c.JSON(http.StatusInternalServerError, map[string]any{"error": err.Error()})
 		}
 
-		galleryService.BackendGalleryChannel <- galleryop.ManagementOp[gallery.GalleryBackend, any]{
-			ID:                 uid.String(),
+		uid := id.String()
+
+		// Register in opcache so the operation shows up in /api/operations
+		// and the Backends UI can reflect progress on the affected row.
+		opcache.SetBackend(backendName, uid)
+
+		ctx, cancelFunc := context.WithCancel(context.Background())
+		op := galleryop.ManagementOp[gallery.GalleryBackend, any]{
+			ID:                 uid,
 			GalleryElementName: backendName,
 			Galleries:          appConfig.BackendGalleries,
 			Upgrade:            true,
+			Context:            ctx,
+			CancelFunc:         cancelFunc,
 		}
+		// Store cancellation function immediately so queued operations can be cancelled
+		galleryService.StoreCancellation(uid, cancelFunc)
+		// Non-blocking send — BackendGalleryChannel is unbuffered and a direct
+		// send would hang the HTTP handler whenever the worker is busy.
+		go func() {
+			galleryService.BackendGalleryChannel <- op
+		}()
 
 		return c.JSON(200, map[string]any{
-			"uuid":      uid.String(),
-			"statusUrl": fmt.Sprintf("/api/backends/job/%s", uid.String()),
+			"jobID":     uid,
+			"uuid":      uid,
+			"statusUrl": fmt.Sprintf("/api/backends/job/%s", uid),
+			"message":   "Backend upgrade started",
 		})
 	}, adminMiddleware)