Add description to upload image step to clarify the image

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",

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">