Add license plate recognition to settings

web/src/views/settings/ClassificationSettingsView.tsx

@@ -30,6 +30,9 @@ type ClassificationSettings = {
   face: {
     enabled?: boolean;
   };
+  lpr: {
+    enabled?: boolean;
+  };
 };
 
 type ClassificationSettingsViewProps = {
@@ -55,6 +58,9 @@ export default function ClassificationSettingsView({
       face: {
         enabled: undefined,
       },
+      lpr: {
+        enabled: undefined,
+      },
     });
 
   const [origSearchSettings, setOrigSearchSettings] =
@@ -67,6 +73,9 @@ export default function ClassificationSettingsView({
       face: {
         enabled: undefined,
       },
+      lpr: {
+        enabled: undefined,
+      },
     });
 
   useEffect(() => {
@@ -81,6 +90,9 @@ export default function ClassificationSettingsView({
           face: {
             enabled: config.face_recognition.enabled,
           },
+          lpr: {
+            enabled: config.lpr.enabled,
+          },
         });
       }
 
@@ -93,6 +105,9 @@ export default function ClassificationSettingsView({
         face: {
           enabled: config.face_recognition.enabled,
         },
+        lpr: {
+          enabled: config.lpr.enabled,
+        },
       });
     }
     // we know that these deps are correct
@@ -108,6 +123,7 @@ export default function ClassificationSettingsView({
         ...newConfig.search,
       },
       face: { ...prevConfig.face, ...newConfig.face },
+      lpr: { ...prevConfig.lpr, ...newConfig.lpr },
     }));
     setUnsavedChanges(true);
     setChangedValue(true);
@@ -351,6 +367,54 @@ export default function ClassificationSettingsView({
 
         <Separator className="my-2 flex bg-secondary" />
 
+        <Heading as="h4" className="my-2">
+          License Plate Recognition
+        </Heading>
+        <div className="max-w-6xl">
+          <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
+            <p>
+              Frigate can recognize license plates on vehicles and automatically
+              add the detected characters to the recognized_license_plate field
+              or a known name as a sub_label to objects that are of type car. A
+              common use case may be to read the license plates of cars pulling
+              into a driveway or cars passing by on a street.
+            </p>
+
+            <div className="flex items-center text-primary">
+              <Link
+                to="https://docs.frigate.video/configuration/license_plate_recognition"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline"
+              >
+                Read the Documentation
+                <LuExternalLink className="ml-2 inline-flex size-3" />
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex w-full max-w-lg flex-col space-y-6">
+          <div className="flex flex-row items-center">
+            <Switch
+              id="enabled"
+              className="mr-3"
+              disabled={classificationSettings.lpr.enabled === undefined}
+              checked={classificationSettings.lpr.enabled === true}
+              onCheckedChange={(isChecked) => {
+                handleClassificationConfigChange({
+                  lpr: { enabled: isChecked },
+                });
+              }}
+            />
+            <div className="space-y-0.5">
+              <Label htmlFor="enabled">Enabled</Label>
+            </div>
+          </div>
+        </div>
+
+        <Separator className="my-2 flex bg-secondary" />
+
         <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
           <Button className="flex flex-1" aria-label="Reset" onClick={onCancel}>
             Reset