Settings UI tweaks (#22547)

* fix genai settings ui

- add roles widget to select roles for genai providers
- add dropdown in semantic search to allow selection of embeddings genai provider

* tweak grouping to prioritize fieldOrder before groups

previously, groups were always rendered first. now fieldOrder is respected, and any fields in a group will cause the group and all the fields in that group to be rendered in order. this allows moving the enabled switches to the top of the section

* mobile tweaks

stack buttons, add more space on profiles pane, and move the overridden badge beneath the description

* language consistency

* prevent camera config sections from being regenerated for profiles

* conditionally import axengine module

to match other detectors

* i18n

* update vscode launch.json for new integrated browser

* formatting

web/src/components/config-form/section-configs/audio.ts

@@ -13,7 +13,7 @@ const audio: SectionConfigOverrides = {
       "num_threads",
     ],
     fieldGroups: {
-      detection: ["enabled", "listen", "filters"],
+      detection: ["listen", "filters"],
       sensitivity: ["min_volume", "max_not_heard"],
     },
     hiddenFields: ["enabled_in_config"],

web/src/components/config-form/section-configs/detect.ts

@@ -18,7 +18,7 @@ const detect: SectionConfigOverrides = {
     ],
     restartRequired: [],
     fieldGroups: {
-      resolution: ["enabled", "width", "height", "fps"],
+      resolution: ["width", "height", "fps"],
       tracking: ["min_initialized", "max_disappeared"],
     },
     hiddenFields: ["enabled_in_config"],

web/src/components/config-form/section-configs/face_recognition.ts

@@ -6,7 +6,7 @@ const faceRecognition: SectionConfigOverrides = {
     restartRequired: [],
     fieldOrder: ["enabled", "min_area"],
     hiddenFields: [],
-    advancedFields: ["min_area"],
+    advancedFields: [],
     overrideFields: ["enabled", "min_area"],
   },
   global: {

web/src/components/config-form/section-configs/genai.ts

@@ -4,39 +4,50 @@ const genai: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/genai/config",
     restartRequired: [
-      "provider",
-      "api_key",
-      "base_url",
-      "model",
-      "provider_options",
-      "runtime_options",
+      "*.provider",
+      "*.api_key",
+      "*.base_url",
+      "*.model",
+      "*.provider_options",
+      "*.runtime_options",
     ],
-    fieldOrder: [
-      "provider",
-      "api_key",
-      "base_url",
-      "model",
-      "provider_options",
-      "runtime_options",
-    ],
-    advancedFields: ["base_url", "provider_options", "runtime_options"],
+    advancedFields: ["*.base_url", "*.provider_options", "*.runtime_options"],
     hiddenFields: ["genai.enabled_in_config"],
     uiSchema: {
-      api_key: {
-        "ui:options": { size: "md" },
+      "ui:options": { disableNestedCard: true },
+      "*": {
+        "ui:options": { disableNestedCard: true },
+        "ui:order": [
+          "provider",
+          "api_key",
+          "base_url",
+          "model",
+          "provider_options",
+          "runtime_options",
+          "*",
+        ],
       },
-      base_url: {
+      "*.roles": {
+        "ui:widget": "genaiRoles",
+      },
+      "*.api_key": {
         "ui:options": { size: "lg" },
       },
-      model: {
-        "ui:options": { size: "md" },
+      "*.base_url": {
+        "ui:options": { size: "lg" },
       },
-      provider_options: {
+      "*.model": {
+        "ui:options": { size: "xs" },
+      },
+      "*.provider": {
+        "ui:options": { size: "xs" },
+      },
+      "*.provider_options": {
         additionalProperties: {
           "ui:options": { size: "lg" },
         },
       },
-      runtime_options: {
+      "*.runtime_options": {
         additionalProperties: {
           "ui:options": { size: "lg" },
         },

web/src/components/config-form/section-configs/lpr.ts

@@ -7,9 +7,9 @@ const lpr: SectionConfigOverrides = {
       enhancement: "/configuration/license_plate_recognition#enhancement",
     },
     restartRequired: [],
-    fieldOrder: ["enabled", "expire_time", "min_area", "enhancement"],
+    fieldOrder: ["enabled", "min_area", "enhancement", "expire_time"],
     hiddenFields: [],
-    advancedFields: ["expire_time", "min_area", "enhancement"],
+    advancedFields: ["expire_time", "enhancement"],
     overrideFields: ["enabled", "min_area", "enhancement"],
   },
   global: {

web/src/components/config-form/section-configs/motion.ts

@@ -23,7 +23,7 @@ const motion: SectionConfigOverrides = {
       "mqtt_off_delay",
     ],
     fieldGroups: {
-      sensitivity: ["enabled", "threshold", "contour_area"],
+      sensitivity: ["threshold", "contour_area"],
       algorithm: ["improve_contrast", "delta_alpha", "frame_alpha"],
     },
     uiSchema: {

web/src/components/config-form/section-configs/record.ts

@@ -15,7 +15,7 @@ const record: SectionConfigOverrides = {
       "export",
     ],
     fieldGroups: {
-      retention: ["enabled", "continuous", "motion"],
+      retention: ["continuous", "motion"],
       events: ["alerts", "detections"],
     },
     hiddenFields: ["enabled_in_config", "sync_recordings"],

web/src/components/config-form/section-configs/semantic_search.ts

@@ -18,6 +18,11 @@ const semanticSearch: SectionConfigOverrides = {
     advancedFields: ["reindex", "device"],
     restartRequired: ["enabled", "model", "model_size", "device"],
     hiddenFields: ["reindex"],
+    uiSchema: {
+      model: {
+        "ui:widget": "semanticSearchModel",
+      },
+    },
   },
 };
 

web/src/components/config-form/section-configs/snapshots.ts

@@ -13,7 +13,7 @@ const snapshots: SectionConfigOverrides = {
       "retain",
     ],
     fieldGroups: {
-      display: ["enabled", "bounding_box", "crop", "quality", "timestamp"],
+      display: ["bounding_box", "crop", "quality", "timestamp"],
     },
     hiddenFields: ["enabled_in_config"],
     advancedFields: ["height", "quality", "retain"],