Face Library UI tweaks (#17525)

* install react-dropzone

* use react-dropzone with preview when uploading new face

* spacing consistency

* text tweaks

web/public/locales/en/views/faceLibrary.json

@@ -1,6 +1,7 @@
 {
   "description": {
-    "addFace": "Walk through adding a new face to the Face Library."
+    "addFace": "Walk through adding a new collection to the Face Library.",
+    "placeholder": "Enter a name for this collection"
   },
   "details": {
     "person": "Person",
@@ -15,10 +16,10 @@
     "desc": "Upload an image to scan for faces and include for {{pageToggle}}"
   },
   "createFaceLibrary": {
-    "title": "Create Face Library",
-    "desc": "Create a new face library",
+    "title": "Create Collection",
+    "desc": "Create a new collection",
     "new": "Create New Face",
-    "nextSteps": "It is recommended to use the Train tab to select and train images for each person as they are detected. When building a strong foundation it is strongly recommended to only train on images that are straight-on. Ignore images from cameras that recognize faces from an angle."
+    "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>"
   },
   "train": {
     "title": "Train",
@@ -28,7 +29,7 @@
   "selectFace": "Select Face",
   "deleteFaceLibrary": {
     "title": "Delete Name",
-    "desc": "Are you sure you want to delete {{name}}? This will permanently delete all associated faces."
+    "desc": "Are you sure you want to delete the collection {{name}}? This will permanently delete all associated faces."
   },
   "button": {
     "deleteFaceAttempts": "Delete Face Attempts",
@@ -36,7 +37,15 @@
     "uploadImage": "Upload Image",
     "reprocessFace": "Reprocess Face"
   },
-  "readTheDocs": "Read the documentation to view more details on refining images for the Face Library",
+  "imageEntry": {
+    "validation": {
+      "selectImage": "Please select an image file."
+    },
+    "dropActive": "Drop the image here...",
+    "dropInstructions": "Drag and drop an image here, or click to select",
+    "maxSize": "Max size: {{size}}MB"
+  },
+  "readTheDocs": "Read the documentation",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",
   "toast": {