Face setup wizard (#17203)

* Fix login page * Increase face image size and add time ago * Add component for indicating steps in a wizard * Split out form inputs from dialog * Add wizard for adding new face to library * Simplify dialog * Translations * Fix scaling bug * Fix key missing * Improve multi select * Adjust wording and spacing * Add tip for face training * Fix padding * Remove text for buttons on mobile
2026-03-16 02:17:46 +01:00 · 2025-03-17 13:50:13 -06:00
parent fad62b996a
commit ff8e145b90
11 changed files with 442 additions and 223 deletions
--- a/web/src/components/indicators/StepIndicator.tsx
+++ b/web/src/components/indicators/StepIndicator.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+type StepIndicatorProps = {
+  steps: string[];
+  currentStep: number;
+};
+export default function StepIndicator({
+  steps,
+  currentStep,
+}: StepIndicatorProps) {
+  return (
+    <div className="flex flex-row justify-evenly">
+      {steps.map((name, idx) => (
+        <div className="flex flex-col items-center gap-2">
+          <div
+            className={cn(
+              "flex size-16 items-center justify-center rounded-full",
+              currentStep == idx ? "bg-selected" : "border-2 border-selected",
+            )}
+          >
+            {idx + 1}
+          </div>
+          <div className="w-24 text-center md:w-24">{name}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/web/src/components/input/ImageEntry.tsx
+++ b/web/src/components/input/ImageEntry.tsx
@@ -0,0 +1,58 @@
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useCallback } from "react";
+import { useForm } from "react-hook-form";
+
+import { z } from "zod";
+
+type ImageEntryProps = {
+  onSave: (file: File) => void;
+  children?: React.ReactNode;
+};
+export default function ImageEntry({ onSave, children }: ImageEntryProps) {
+  const formSchema = z.object({
+    file: z.instanceof(FileList, { message: "Please select an image file." }),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+  const fileRef = form.register("file");
+
+  // upload handler
+
+  const onSubmit = useCallback(
+    (data: z.infer<typeof formSchema>) => {
+      if (!data["file"] || Object.keys(data.file).length == 0) {
+        return;
+      }
+
+      onSave(data["file"]["0"]);
+    },
+    [onSave],
+  );
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="file"
+          render={() => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  className="aspect-video h-40 w-full"
+                  type="file"
+                  {...fileRef}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        {children}
+      </form>
+    </Form>
+  );
+}
--- a/web/src/components/input/TextEntry.tsx
+++ b/web/src/components/input/TextEntry.tsx
@@ -0,0 +1,68 @@
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useCallback } from "react";
+import { useForm } from "react-hook-form";
+
+import { z } from "zod";
+
+type TextEntryProps = {
+  defaultValue?: string;
+  placeholder?: string;
+  allowEmpty?: boolean;
+  onSave: (text: string) => void;
+  children?: React.ReactNode;
+};
+export default function TextEntry({
+  defaultValue,
+  placeholder,
+  allowEmpty,
+  onSave,
+  children,
+}: TextEntryProps) {
+  const formSchema = z.object({
+    text: z.string(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { text: defaultValue },
+  });
+  const fileRef = form.register("text");
+
+  // upload handler
+
+  const onSubmit = useCallback(
+    (data: z.infer<typeof formSchema>) => {
+      if (!allowEmpty && !data["text"]) {
+        return;
+      }
+      onSave(data["text"]);
+    },
+    [onSave, allowEmpty],
+  );
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="text"
+          render={() => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  className="aspect-video h-8 w-full"
+                  placeholder={placeholder}
+                  type="text"
+                  {...fileRef}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        {children}
+      </form>
+    </Form>
+  );
+}
--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
@@ -0,0 +1,168 @@
+import StepIndicator from "@/components/indicators/StepIndicator";
+import ImageEntry from "@/components/input/ImageEntry";
+import TextEntry from "@/components/input/TextEntry";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "@/components/mobile/MobilePage";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import axios from "axios";
+import { useCallback, useState } from "react";
+import { isDesktop } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import { LuExternalLink } from "react-icons/lu";
+import { Link } from "react-router-dom";
+import { toast } from "sonner";
+
+const STEPS = ["Enter Face Name", "Upload Face Image", "Next Steps"];
+
+type CreateFaceWizardDialogProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onFinish: () => void;
+};
+export default function CreateFaceWizardDialog({
+  open,
+  setOpen,
+  onFinish,
+}: CreateFaceWizardDialogProps) {
+  const { t } = useTranslation("views/faceLibrary");
+
+  // wizard
+
+  const [step, setStep] = useState(0);
+  const [name, setName] = useState("");
+
+  const handleReset = useCallback(() => {
+    setStep(0);
+    setName("");
+    setOpen(false);
+  }, [setOpen]);
+
+  // data handling
+
+  const onUploadImage = useCallback(
+    (file: File) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      axios
+        .post(`faces/${name}/register`, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((resp) => {
+          if (resp.status == 200) {
+            setStep(2);
+            toast.success(t("toast.success.uploadedImage"), {
+              position: "top-center",
+            });
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(t("toast.error.uploadingImageFailed", { errorMessage }), {
+            position: "top-center",
+          });
+        });
+    },
+    [name, t],
+  );
+
+  // layout
+
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+
+  return (
+    <Overlay
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleReset();
+        }
+      }}
+    >
+      <Content
+        className={cn("flex flex-col gap-4", isDesktop ? "max-w-[50%]" : "p-4")}
+      >
+        <Header>
+          <Title>{t("button.addFace")}</Title>
+          {isDesktop && <Description>{t("description.addFace")}</Description>}
+        </Header>
+        <StepIndicator steps={STEPS} currentStep={step} />
+        {step == 0 && (
+          <TextEntry
+            placeholder="Enter Face Name"
+            onSave={(name) => {
+              setName(name);
+              setStep(1);
+            }}
+          >
+            <div className="flex justify-end py-2">
+              <Button variant="select" type="submit">
+                {t("button.next", { ns: "common" })}
+              </Button>
+            </div>
+          </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>
+          </ImageEntry>
+        )}
+        {step == 2 && (
+          <div>
+            {t("toast.success.addFaceLibrary", { name })}
+            <p className="py-4 text-sm text-secondary-foreground">
+              {t("createFaceLibrary.nextSteps")}
+            </p>
+            <div className="text-s my-4 flex items-center text-primary">
+              <Link
+                to="https://docs.frigate.video/configuration/face_recognition"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline"
+              >
+                {t("readTheDocs")}
+                <LuExternalLink className="ml-2 inline-flex size-3" />
+              </Link>
+            </div>
+            <div className="flex justify-end">
+              <Button
+                variant="select"
+                onClick={() => {
+                  onFinish();
+                  handleReset();
+                }}
+              >
+                {t("button.done", { ns: "common" })}
+              </Button>
+            </div>
+          </div>
+        )}
+      </Content>
+    </Overlay>
+  );
+}
--- a/web/src/components/overlay/dialog/TextEntryDialog.tsx
+++ b/web/src/components/overlay/dialog/TextEntryDialog.tsx
@@ -1,3 +1,4 @@
+import TextEntry from "@/components/input/TextEntry";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -7,15 +8,8 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback, useEffect } from "react";
-import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";

-import { z } from "zod";
-
 type TextEntryDialogProps = {
  open: boolean;
  title: string;
@@ -35,35 +29,7 @@ export default function TextEntryDialog({
  defaultValue = "",
  allowEmpty = false,
 }: TextEntryDialogProps) {
-  const formSchema = z.object({
-    text: z.string(),
-  });
-
-  const { t } = useTranslation("components/dialog");
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { text: defaultValue },
-  });
-  const fileRef = form.register("text");
-
-  // upload handler
-
-  const onSubmit = useCallback(
-    (data: z.infer<typeof formSchema>) => {
-      if (!allowEmpty && !data["text"]) {
-        return;
-      }
-      onSave(data["text"]);
-    },
-    [onSave, allowEmpty],
-  );
-
-  useEffect(() => {
-    if (open) {
-      form.reset({ text: defaultValue });
-    }
-  }, [open, defaultValue, form]);
+  const { t } = useTranslation("common");

  return (
    <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
@@ -72,33 +38,20 @@ export default function TextEntryDialog({
          <DialogTitle>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField
-              control={form.control}
-              name="text"
-              render={() => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      className="aspect-video h-8 w-full"
-                      type="text"
-                      {...fileRef}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <DialogFooter className="pt-4">
-              <Button type="button" onClick={() => setOpen(false)}>
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button variant="select" type="submit">
-                {t("button.save", { ns: "common" })}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+        <TextEntry
+          defaultValue={defaultValue}
+          allowEmpty={allowEmpty}
+          onSave={onSave}
+        >
+          <DialogFooter className="pt-4">
+            <Button type="button" onClick={() => setOpen(false)}>
+              {t("button.cancel")}
+            </Button>
+            <Button variant="select" type="submit">
+              {t("button.save")}
+            </Button>
+          </DialogFooter>
+        </TextEntry>
      </DialogContent>
    </Dialog>
  );
--- a/web/src/components/overlay/dialog/UploadImageDialog.tsx
+++ b/web/src/components/overlay/dialog/UploadImageDialog.tsx
@@ -1,3 +1,4 @@
+import ImageEntry from "@/components/input/ImageEntry";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -7,12 +8,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { useTranslation } from "react-i18next";

 type UploadImageDialogProps = {
  open: boolean;
@@ -28,27 +24,7 @@ export default function UploadImageDialog({
  setOpen,
  onSave,
 }: UploadImageDialogProps) {
-  const formSchema = z.object({
-    file: z.instanceof(FileList, { message: "Please select an image file." }),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-  });
-  const fileRef = form.register("file");
-
-  // upload handler
-
-  const onSubmit = useCallback(
-    (data: z.infer<typeof formSchema>) => {
-      if (!data["file"] || Object.keys(data.file).length == 0) {
-        return;
-      }
-
-      onSave(data["file"]["0"]);
-    },
-    [onSave],
-  );
+  const { t } = useTranslation("common");

  return (
    <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
@@ -57,31 +33,14 @@ export default function UploadImageDialog({
          <DialogTitle>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField
-              control={form.control}
-              name="file"
-              render={() => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      className="aspect-video h-40 w-full"
-                      type="file"
-                      {...fileRef}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <DialogFooter className="pt-4">
-              <Button onClick={() => setOpen(false)}>Cancel</Button>
-              <Button variant="select" type="submit">
-                Save
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+        <ImageEntry onSave={onSave}>
+          <DialogFooter className="pt-4">
+            <Button onClick={() => setOpen(false)}>{t("button.cancel")}</Button>
+            <Button variant="select" type="submit">
+              {t("button.save")}
+            </Button>
+          </DialogFooter>
+        </ImageEntry>
      </DialogContent>
    </Dialog>
  );