Add steps for face step indicator (#17719)

This commit is contained in:
Nicolas Mowen 2025-04-15 12:09:47 -06:00 committed by GitHub
parent 760ed25f0c
commit 9e666ddf40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 3 deletions

View File

@ -21,6 +21,11 @@
"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>"
},
"steps": {
"faceName": "Enter Face Name",
"uploadFace": "Upload Face Image",
"nextSteps": "Next Steps"
},
"train": {
"title": "Train",
"aria": "Select train"

View File

@ -1,13 +1,18 @@
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";
type StepIndicatorProps = {
steps: string[];
currentStep: number;
translationNameSpace: string;
};
export default function StepIndicator({
steps,
currentStep,
translationNameSpace,
}: StepIndicatorProps) {
const { t } = useTranslation(translationNameSpace);
return (
<div className="flex flex-row justify-evenly">
{steps.map((name, idx) => (
@ -20,7 +25,7 @@ export default function StepIndicator({
>
{idx + 1}
</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>

View File

@ -25,7 +25,7 @@ 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"];
const STEPS = ["steps.faceName", "steps.uploadFace", "steps.nextSteps"];
type CreateFaceWizardDialogProps = {
open: boolean;
@ -107,7 +107,11 @@ export default function CreateFaceWizardDialog({
<Title>{t("button.addFace")}</Title>
{isDesktop && <Description>{t("description.addFace")}</Description>}
</Header>
<StepIndicator steps={STEPS} currentStep={step} />
<StepIndicator
steps={STEPS}
currentStep={step}
translationNameSpace="views/faceLibrary"
/>
{step == 0 && (
<TextEntry
placeholder={t("description.placeholder")}