This commit is contained in:
Nicolas Mowen 2025-10-23 12:35:31 -06:00
parent 9626b8c3af
commit e3512c20e0
2 changed files with 49 additions and 55 deletions

View File

@ -71,7 +71,7 @@
"chooseExamples": "Choose Examples" "chooseExamples": "Choose Examples"
}, },
"step1": { "step1": {
"description": "Create a custom classification model. State models monitor fixed camera areas for changes (e.g., door open/closed). Object models add classifications to detected objects (e.g., known animals, delivery persons, etc.).", "description": "State models monitor fixed camera areas for changes (e.g., door open/closed). Object models add classifications to detected objects (e.g., known animals, delivery persons, etc.).",
"name": "Name", "name": "Name",
"namePlaceholder": "Enter model name...", "namePlaceholder": "Enter model name...",
"type": "Type", "type": "Type",
@ -81,7 +81,7 @@
"objectLabelPlaceholder": "Select object type...", "objectLabelPlaceholder": "Select object type...",
"classificationType": "Classification Type", "classificationType": "Classification Type",
"classificationTypeTip": "Learn about classification types", "classificationTypeTip": "Learn about classification types",
"classificationTypeDesc": "Sub Labels add additional next to the object label (e.g., 'Person: UPS'). Attributes are searchable metadata stored separately in the object metadata.", "classificationTypeDesc": "Sub Labels add additional text to the object label (e.g., 'Person: UPS'). Attributes are searchable metadata stored separately in the object metadata.",
"classificationSubLabel": "Sub Label", "classificationSubLabel": "Sub Label",
"classificationAttribute": "Attribute", "classificationAttribute": "Attribute",
"classes": "Classes", "classes": "Classes",

View File

@ -2,7 +2,6 @@ import { Button } from "@/components/ui/button";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
@ -28,7 +27,6 @@ import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { getTranslatedLabel } from "@/utils/i18n"; import { getTranslatedLabel } from "@/utils/i18n";
import { useDocDomain } from "@/hooks/use-doc-domain"; import { useDocDomain } from "@/hooks/use-doc-domain";
import { Link } from "react-router-dom";
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
@ -313,41 +311,42 @@ export default function Step1NameAndDefine({
name="objectType" name="objectType"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<div className="flex items-center gap-1">
<FormLabel className="text-primary-variant"> <FormLabel className="text-primary-variant">
{t("wizard.step1.classificationType")} {t("wizard.step1.classificationType")}
</FormLabel> </FormLabel>
<FormDescription className="mt-1 pt-0.5 text-xs text-muted-foreground">
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger asChild>
<div className="flex flex-row items-center gap-0.5 text-xs text-muted-foreground hover:text-primary"> <Button
variant="ghost"
size="sm"
className="h-4 w-4 p-0"
>
<LuInfo className="size-3" /> <LuInfo className="size-3" />
<span className="cursor-pointer"> </Button>
{t("wizard.step1.classificationTypeTip")}
</span>
</div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent> <PopoverContent className="pointer-events-auto w-80 text-xs">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="text-sm"> <div className="text-sm">
{t("wizard.step1.classificationTypeDesc")} {t("wizard.step1.classificationTypeDesc")}
</div> </div>
<div className="mt-3 flex items-center text-primary"> <div className="mt-3 flex items-center text-primary">
<Link <a
to={getLocaleDocUrl( href={getLocaleDocUrl(
"configuration/custom_classification/object_classification#classification-type", "configuration/custom_classification/object_classification#classification-type",
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline" className="inline cursor-pointer underline hover:no-underline"
> >
{t("readTheDocumentation", { ns: "common" })} {t("readTheDocumentation", { ns: "common" })}
<LuExternalLink className="ml-2 inline-flex size-3" /> <LuExternalLink className="ml-2 inline-flex size-3" />
</Link> </a>
</div> </div>
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</FormDescription> </div>
<FormControl> <FormControl>
<RadioGroup <RadioGroup
onValueChange={field.onChange} onValueChange={field.onChange}
@ -393,21 +392,17 @@ export default function Step1NameAndDefine({
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-col"> <div className="flex items-center gap-1">
<FormLabel className="text-primary-variant"> <FormLabel className="text-primary-variant">
{t("wizard.step1.classes")} {t("wizard.step1.classes")}
</FormLabel> </FormLabel>
<FormDescription className="mt-1 pt-0.5 text-xs text-muted-foreground">
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger asChild>
<div className="flex flex-row items-center gap-0.5 text-xs text-muted-foreground hover:text-primary"> <Button variant="ghost" size="sm" className="h-4 w-4 p-0">
<LuInfo className="size-3" /> <LuInfo className="size-3" />
<span className="cursor-pointer"> </Button>
{t("wizard.step1.classesTip")}
</span>
</div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent> <PopoverContent className="pointer-events-auto w-80 text-xs">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="text-sm"> <div className="text-sm">
{watchedModelType === "state" {watchedModelType === "state"
@ -415,24 +410,23 @@ export default function Step1NameAndDefine({
: t("wizard.step1.classesObjectDesc")} : t("wizard.step1.classesObjectDesc")}
</div> </div>
<div className="mt-3 flex items-center text-primary"> <div className="mt-3 flex items-center text-primary">
<Link <a
to={getLocaleDocUrl( href={getLocaleDocUrl(
watchedModelType === "state" watchedModelType === "state"
? "configuration/custom_classification/state_classification" ? "configuration/custom_classification/state_classification"
: "configuration/custom_classification/object_classification", : "configuration/custom_classification/object_classification",
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline" className="inline cursor-pointer underline hover:no-underline"
> >
{t("readTheDocumentation", { ns: "common" })} {t("readTheDocumentation", { ns: "common" })}
<LuExternalLink className="ml-2 inline-flex size-3" /> <LuExternalLink className="ml-2 inline-flex size-3" />
</Link> </a>
</div> </div>
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</FormDescription>
</div> </div>
<Button <Button
type="button" type="button"