mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-09-05 17:51:36 +02:00
Add steps for face step indicator (#17719)
This commit is contained in:
parent
760ed25f0c
commit
9e666ddf40
@ -21,6 +21,11 @@
|
|||||||
"new": "Create New Face",
|
"new": "Create New Face",
|
||||||
"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>"
|
"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>"
|
||||||
},
|
},
|
||||||
|
"steps": {
|
||||||
|
"faceName": "Enter Face Name",
|
||||||
|
"uploadFace": "Upload Face Image",
|
||||||
|
"nextSteps": "Next Steps"
|
||||||
|
},
|
||||||
"train": {
|
"train": {
|
||||||
"title": "Train",
|
"title": "Train",
|
||||||
"aria": "Select train"
|
"aria": "Select train"
|
||||||
|
@ -1,13 +1,18 @@
|
|||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
type StepIndicatorProps = {
|
type StepIndicatorProps = {
|
||||||
steps: string[];
|
steps: string[];
|
||||||
currentStep: number;
|
currentStep: number;
|
||||||
|
translationNameSpace: string;
|
||||||
};
|
};
|
||||||
export default function StepIndicator({
|
export default function StepIndicator({
|
||||||
steps,
|
steps,
|
||||||
currentStep,
|
currentStep,
|
||||||
|
translationNameSpace,
|
||||||
}: StepIndicatorProps) {
|
}: StepIndicatorProps) {
|
||||||
|
const { t } = useTranslation(translationNameSpace);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row justify-evenly">
|
<div className="flex flex-row justify-evenly">
|
||||||
{steps.map((name, idx) => (
|
{steps.map((name, idx) => (
|
||||||
@ -20,7 +25,7 @@ export default function StepIndicator({
|
|||||||
>
|
>
|
||||||
{idx + 1}
|
{idx + 1}
|
||||||
</div>
|
</div>
|
||||||
<div className="w-24 text-center md:w-24">{name}</div>
|
<div className="w-24 text-center md:w-24">{t(name)}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -25,7 +25,7 @@ import { LuExternalLink } from "react-icons/lu";
|
|||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
const STEPS = ["Enter Face Name", "Upload Face Image", "Next Steps"];
|
const STEPS = ["steps.faceName", "steps.uploadFace", "steps.nextSteps"];
|
||||||
|
|
||||||
type CreateFaceWizardDialogProps = {
|
type CreateFaceWizardDialogProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@ -107,7 +107,11 @@ export default function CreateFaceWizardDialog({
|
|||||||
<Title>{t("button.addFace")}</Title>
|
<Title>{t("button.addFace")}</Title>
|
||||||
{isDesktop && <Description>{t("description.addFace")}</Description>}
|
{isDesktop && <Description>{t("description.addFace")}</Description>}
|
||||||
</Header>
|
</Header>
|
||||||
<StepIndicator steps={STEPS} currentStep={step} />
|
<StepIndicator
|
||||||
|
steps={STEPS}
|
||||||
|
currentStep={step}
|
||||||
|
translationNameSpace="views/faceLibrary"
|
||||||
|
/>
|
||||||
{step == 0 && (
|
{step == 0 && (
|
||||||
<TextEntry
|
<TextEntry
|
||||||
placeholder={t("description.placeholder")}
|
placeholder={t("description.placeholder")}
|
||||||
|
Loading…
Reference in New Issue
Block a user