From 37460a4eec8736853227d6ae426344f88191f7ed Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 9 May 2025 07:15:08 -0600
Subject: [PATCH] Add description to upload image step to clarify the image

---
 web/public/locales/en/views/faceLibrary.json    |  5 ++++-
 .../overlay/detail/FaceCreateWizardDialog.tsx   | 17 +++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/public/locales/en/views/faceLibrary.json b/web/public/locales/en/views/faceLibrary.json
index 48bc6401c..8965de413 100644
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/web/public/locales/en/views/faceLibrary.json
@@ -27,7 +27,10 @@
   "steps": {
     "faceName": "Enter Face Name",
     "uploadFace": "Upload Face Image",
-    "nextSteps": "Next Steps"
+    "nextSteps": "Next Steps",
+    "description": {
+      "uploadFace": "Upload an image of {{name}}. This should be an image including their face straight-on. Note that the image does not need to be cropped to just their face.",
+    }
   },
   "train": {
     "title": "Train",
diff --git a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
index b2ac8d591..9fb3c9fad 100644
--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
@@ -128,13 +128,18 @@ export default function CreateFaceWizardDialog({
           </TextEntry>
         )}
         {step == 1 && (
-          <ImageEntry onSave={onUploadImage}>
-            <div className="flex justify-end py-2">
-              <Button variant="select" type="submit">
-                {t("button.next", { ns: "common" })}
-              </Button>
+          <>
+            <div className="px-8 py-2 text-center text-sm text-secondary-foreground">
+              {t("steps.description.uploadFace", { name })}
             </div>
-          </ImageEntry>
+            <ImageEntry onSave={onUploadImage}>
+              <div className="flex justify-end py-2">
+                <Button variant="select" type="submit">
+                  {t("button.next", { ns: "common" })}
+                </Button>
+              </div>
+            </ImageEntry>
+          </>
         )}
         {step == 2 && (
           <div className="mt-2">