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

View File

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

View File

@ -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")}