From 208b80939b9e69ce4ca7226a6c358653e9b045f3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 10 May 2026 13:35:59 -0500
Subject: [PATCH] show EmptyCard in face rec when face library is empty

---
 web/public/locales/en/views/faceLibrary.json |  6 +++++-
 web/src/pages/FaceLibrary.tsx                | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/public/locales/en/views/faceLibrary.json b/web/public/locales/en/views/faceLibrary.json
index 4f8a9cf2da..27e5454601 100644
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/web/public/locales/en/views/faceLibrary.json
@@ -32,7 +32,11 @@
     "title": "Recent Recognitions",
     "titleShort": "Recent",
     "aria": "Select recent recognitions",
-    "empty": "There are no recent face recognition attempts"
+    "empty": "There are no recent face recognition attempts",
+    "emptyNoLibrary": {
+      "title": "Upload a face",
+      "description": "You must add at least one face to the library for face recognition to function."
+    }
   },
   "deleteFaceLibrary": {
     "title": "Delete Name",
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 20763261c8..2a9d4d6de7 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -1,5 +1,6 @@
 import AddFaceIcon from "@/components/icons/AddFaceIcon";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { EmptyCard } from "@/components/card/EmptyCard";
 import CreateFaceWizardDialog from "@/components/overlay/detail/FaceCreateWizardDialog";
 import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
 import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
@@ -474,6 +475,7 @@ export default function FaceLibrary() {
             faceNames={faces}
             selectedFaces={selectedFaces}
             onClickFaces={onClickFaces}
+            onAddFace={() => setAddFace(true)}
             onRefresh={refreshFaces}
           />
         ) : (
@@ -692,6 +694,7 @@ type TrainingGridProps = {
   faceNames: string[];
   selectedFaces: string[];
   onClickFaces: (images: string[], ctrl: boolean) => void;
+  onAddFace: () => void;
   onRefresh: (
     data?:
       | FaceLibraryData
@@ -709,6 +712,7 @@ function TrainingGrid({
   faceNames,
   selectedFaces,
   onClickFaces,
+  onAddFace,
   onRefresh,
 }: TrainingGridProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
@@ -762,6 +766,19 @@ function TrainingGrid({
   ]);
 
   if (attemptImages.length == 0) {
+    if (faceNames.length == 0) {
+      return (
+        <EmptyCard
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 items-center text-center"
+          icon={<AddFaceIcon className="size-16" />}
+          title={t("train.emptyNoLibrary.title")}
+          description={t("train.emptyNoLibrary.description")}
+          buttonText={t("button.addFace")}
+          onClick={onAddFace}
+        />
+      );
+    }
+
     return (
       <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
         <LuFolderCheck className="size-16" />