Azure genai fixes (#14103)

* Azure fixes

* clarify docs

* sublabels fix

docs/docs/configuration/genai.md

@@ -108,7 +108,7 @@ Microsoft offers several vision models through Azure OpenAI. A subscription is r
 
 You must use a vision capable model with Frigate. Current model variants can be found [in their documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models). At the time of writing, this includes `gpt-4o` and `gpt-4-turbo`.
 
-### Get API Key
+### Create Resource and Get API Key
 
 To start using Azure OpenAI, you must first [create a resource](https://learn.microsoft.com/azure/cognitive-services/openai/how-to/create-resource?pivots=web-portal#create-a-resource). You'll need your API key and resource URL, which must include the `api-version` parameter (see the example below). The model field is not required in your configuration as the model is part of the deployment name you chose when deploying the resource.
 
@@ -117,7 +117,7 @@ To start using Azure OpenAI, you must first [create a resource](https://learn.mi
 ```yaml
 genai:
   enabled: True
-  provider: openai
+  provider: azure_openai
   base_url: https://example-endpoint.openai.azure.com/openai/deployments/gpt-4o/chat/completions?api-version=2023-03-15-preview
   api_key: "{FRIGATE_OPENAI_API_KEY}"
 ```

web/src/components/filter/SearchFilterGroup.tsx

@@ -79,7 +79,7 @@ export default function SearchFilterGroup({
     return [...labels].sort();
   }, [config, filterList, filter]);
 
-  const { data: allSubLabels } = useSWR("sub_labels");
+  const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]);
 
   const allZones = useMemo<string[]>(() => {
     if (filterList?.zones) {

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -51,7 +51,7 @@ import {
 import { ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import Chip from "@/components/indicators/Chip";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import { capitalizeAll } from "@/utils/stringUtil";
 import useGlobalMutation from "@/hooks/use-global-mutate";
 import {
   DropdownMenu,
@@ -332,7 +332,7 @@ function ObjectDetailsTab({
         .then((resp) => {
           if (resp.status == 200) {
             toast.success(
-              `A new description has been requested from ${capitalizeFirstLetter(config?.genai.provider ?? "Generative AI")}. Depending on the speed of your provider, the new description may take some time to regenerate.`,
+              `A new description has been requested from ${capitalizeAll(config?.genai.provider.replaceAll("_", " ") ?? "Generative AI")}. Depending on the speed of your provider, the new description may take some time to regenerate.`,
               {
                 position: "top-center",
                 duration: 7000,
@@ -342,7 +342,7 @@ function ObjectDetailsTab({
         })
         .catch(() => {
           toast.error(
-            `Failed to call ${capitalizeFirstLetter(config?.genai.provider ?? "Generative AI")} for a new description`,
+            `Failed to call ${capitalizeAll(config?.genai.provider.replaceAll("_", " ") ?? "Generative AI")} for a new description`,
             {
               position: "top-center",
             },

web/src/utils/stringUtil.ts

@@ -1,3 +1,10 @@
 export const capitalizeFirstLetter = (text: string): string => {
   return text.charAt(0).toUpperCase() + text.slice(1);
 };
+
+export const capitalizeAll = (text: string): string => {
+  return text
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};