From 7043132462131315cc0fe95de60380b303fc4867 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 25 Mar 2025 15:11:58 -0600
Subject: [PATCH] Add face recognition model size to ui config

---
 web/public/locales/en/views/settings.json     | 14 ++++-
 web/src/types/frigateConfig.ts                |  1 +
 .../settings/ClassificationSettingsView.tsx   | 62 ++++++++++++++++++-
 3 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index d642c12e6..fe623c2f7 100644
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -107,7 +107,19 @@
     "faceRecognition": {
       "title": "Face Recognition",
       "desc": "Face recognition allows people to be assigned names and when their face is recognized Frigate will assign the person's name as a sub label. This information is included in the UI, filters, as well as in notifications.",
-      "readTheDocumentation": "Read the Documentation"
+      "readTheDocumentation": "Read the Documentation",
+      "modelSize": {
+        "label": "Model Size",
+        "desc": "The size of the model used for face recognition.",
+        "small": {
+          "title": "small",
+          "desc": "Using <em>small</em> employs a Local Binary Pattern Histogram model via OpenCV that runs efficiently on most CPUs."
+        },
+        "large": {
+          "title": "large",
+          "desc": "Using <em>large</em> employs an ArcFace Face embedding model and will automatically run on the GPU if applicable."
+        }
+      }
     },
     "licensePlateRecognition": {
       "title": "License Plate Recognition",
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index 947c5cde9..5312bed8c 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -333,6 +333,7 @@ export interface FrigateConfig {
 
   face_recognition: {
     enabled: boolean;
+    model_size: SearchModelSize;
     detection_threshold: number;
     recognition_threshold: number;
   };
diff --git a/web/src/views/settings/ClassificationSettingsView.tsx b/web/src/views/settings/ClassificationSettingsView.tsx
index 07926182b..2ce958f9e 100644
--- a/web/src/views/settings/ClassificationSettingsView.tsx
+++ b/web/src/views/settings/ClassificationSettingsView.tsx
@@ -30,6 +30,7 @@ type ClassificationSettings = {
   };
   face: {
     enabled?: boolean;
+    model_size?: SearchModelSize;
   };
   lpr: {
     enabled?: boolean;
@@ -59,6 +60,7 @@ export default function ClassificationSettingsView({
       },
       face: {
         enabled: undefined,
+        model_size: undefined,
       },
       lpr: {
         enabled: undefined,
@@ -74,6 +76,7 @@ export default function ClassificationSettingsView({
       },
       face: {
         enabled: undefined,
+        model_size: undefined,
       },
       lpr: {
         enabled: undefined,
@@ -91,6 +94,7 @@ export default function ClassificationSettingsView({
           },
           face: {
             enabled: config.face_recognition.enabled,
+            model_size: config.face_recognition.model_size,
           },
           lpr: {
             enabled: config.lpr.enabled,
@@ -106,6 +110,7 @@ export default function ClassificationSettingsView({
         },
         face: {
           enabled: config.face_recognition.enabled,
+          model_size: config.face_recognition.model_size,
         },
         lpr: {
           enabled: config.lpr.enabled,
@@ -136,7 +141,7 @@ export default function ClassificationSettingsView({
 
     axios
       .put(
-        `config/set?semantic_search.enabled=${classificationSettings.search.enabled ? "True" : "False"}&semantic_search.reindex=${classificationSettings.search.reindex ? "True" : "False"}&semantic_search.model_size=${classificationSettings.search.model_size}&face_recognition.enabled=${classificationSettings.face.enabled ? "True" : "False"}&lpr.enabled=${classificationSettings.lpr.enabled ? "True" : "False"}`,
+        `config/set?semantic_search.enabled=${classificationSettings.search.enabled ? "True" : "False"}&semantic_search.reindex=${classificationSettings.search.reindex ? "True" : "False"}&semantic_search.model_size=${classificationSettings.search.model_size}&face_recognition.enabled=${classificationSettings.face.enabled ? "True" : "False"}&face_recognition.model_size=${classificationSettings.face.model_size}&lpr.enabled=${classificationSettings.lpr.enabled ? "True" : "False"}`,
         {
           requires_restart: 0,
         },
@@ -384,6 +389,61 @@ export default function ClassificationSettingsView({
                 </Label>
               </div>
             </div>
+            <div className="space-y-0.5">
+              <div className="text-md">
+                {t("classification.faceRecognition.modelSize.label")}
+              </div>
+              <div className="space-y-1 text-sm text-muted-foreground">
+                <p>
+                  <Trans ns="views/settings">
+                    classification.faceRecognition.modelSize.desc
+                  </Trans>
+                </p>
+                <ul className="list-disc pl-5 text-sm">
+                  <li>
+                    <Trans ns="views/settings">
+                      classification.faceRecognition.modelSize.small.desc
+                    </Trans>
+                  </li>
+                  <li>
+                    <Trans ns="views/settings">
+                      classification.faceRecognition.modelSize.large.desc
+                    </Trans>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <Select
+              value={classificationSettings.face.model_size}
+              onValueChange={(value) =>
+                handleClassificationConfigChange({
+                  face: {
+                    model_size: value as SearchModelSize,
+                  },
+                })
+              }
+            >
+              <SelectTrigger className="w-20">
+                {classificationSettings.search.model_size}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {["small", "large"].map((size) => (
+                    <SelectItem
+                      key={size}
+                      className="cursor-pointer"
+                      value={size}
+                    >
+                      {t(
+                        "classification.faceRecognition.modelSize." +
+                          size +
+                          ".title",
+                      )}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
           </div>
 
           <Separator className="my-2 flex bg-secondary" />