feat: add i18n (translation/localization) (#16877)

* Translation module init * Add more i18n keys * fix: fix string wrong * refactor: use namespace translation file * chore: add more translation key * fix: fix some page name error * refactor: change Trans tag for t function * chore: fix some key not work * chore: fix SearchFilterDialog i18n key error Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * chore: fix en i18n file filter missing some keys * chore: add some i18n keys * chore: add more i18n keys again * feat: add search page i18n * feat: add explore model i18n keys * Update web/src/components/menu/GeneralSettings.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/components/menu/GeneralSettings.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/components/menu/GeneralSettings.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * feat: add more live i18n keys * feat: add more search setting i18n keys * fix: remove some comment * fix: fix some setting page url error * Update web/src/views/settings/SearchSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * fix: add system missing keys * fix: update password update i18n keys * chore: remove outdate translation.json file * fix: fix exploreSettings error * chore: add object setting i18n keys * Update web/src/views/recording/RecordingView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/public/locales/en/components/filter.json Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/components/overlay/ExportDialog.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * feat: add more i18n keys * fix: fix motionDetectionTuner html node * feat: add more page i18n keys * fix: cameraStream i18n keys error * feat: add Player i18n keys * feat: add more toast i18n keys * feat: change explore setting name * feat: add more document title i18n keys * feat: add more search i18n keys * fix: fix accessDenied i18n keys error * chore: add objectType i18n * chore: add inputWithTags i18n * chore: add SearchFilterDialog i18n * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * chore: add some missing i18n keys * chore: remove most import { t } from "i18next"; --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
2026-08-01 16:42:18 +03:00 · 2025-03-16 10:36:20 -05:00
parent db541abed4
commit d34533981f
150 changed files with 6809 additions and 1926 deletions
@@ -1,21 +1,21 @@
 import Heading from "@/components/ui/heading";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { FaExclamationTriangle } from "react-icons/fa";

 export default function AccessDenied() {
+  const { t } = useTranslation(["common"]);
  useEffect(() => {
-    document.title = "Access Denied - Frigate";
-  }, []);
+    document.title = t("accessDenied.documentTitle");
+  }, [t]);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center text-center">
      <FaExclamationTriangle className="mb-4 size-8" />
      <Heading as="h2" className="mb-2">
-        Access Denied
+        {t("accessDenied.title")}
      </Heading>
-      <p className="text-primary-variant">
-        You don't have permission to view this page.
-      </p>
+      <p className="text-primary-variant">{t("accessDenied.desc")}</p>
    </div>
  );
 }
@@ -14,6 +14,7 @@ import { toast } from "sonner";
 import { LuCopy, LuSave } from "react-icons/lu";
 import { MdOutlineRestartAlt } from "react-icons/md";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
+import { useTranslation } from "react-i18next";
 import { useRestart } from "@/api/ws";

 type SaveOptions = "saveonly" | "restart";
@@ -24,11 +25,12 @@ type ApiErrorResponse = {
 };

 function ConfigEditor() {
+  const { t } = useTranslation(["views/configEditor"]);
  const apiHost = useApiHost();

  useEffect(() => {
-    document.title = "Config Editor - Frigate";
-  }, []);
+    document.title = t("documentTitle");
+  }, [t]);

  const { data: config } = useSWR<string>("config/raw");

@@ -64,7 +66,7 @@ function ConfigEditor() {
          toast.success(response.data.message, { position: "top-center" });
        }
      } catch (error) {
-        toast.error("Error saving config", { position: "top-center" });
+        toast.error(t("toast.error.savingError"), { position: "top-center" });

        const axiosError = error as AxiosError<ApiErrorResponse>;
        const errorMessage =
@@ -76,7 +78,7 @@ function ConfigEditor() {
        throw new Error(errorMessage);
      }
    },
-    [editorRef],
+    [editorRef, t],
  );

  const handleCopyConfig = useCallback(async () => {
@@ -85,8 +87,10 @@ function ConfigEditor() {
    }

    copy(editorRef.current.getValue());
-    toast.success("Config copied to clipboard.", { position: "top-center" });
-  }, [editorRef]);
+    toast.success(t("toast.success.copyToClipboard"), {
+      position: "top-center",
+    });
+  }, [editorRef, t]);

  const handleSaveAndRestart = useCallback(async () => {
    try {
@@ -208,38 +212,38 @@ function ConfigEditor() {
      <div className="relative h-full overflow-hidden">
        <div className="mr-1 flex items-center justify-between">
          <Heading as="h2" className="mb-0 ml-1 md:ml-0">
-            Config Editor
+            {t("configEditor")}
          </Heading>
          <div className="flex flex-row gap-1">
            <Button
              size="sm"
              className="flex items-center gap-2"
-              aria-label="Copy config"
+              aria-label={t("copyConfig")}
              onClick={() => handleCopyConfig()}
            >
              <LuCopy className="text-secondary-foreground" />
-              <span className="hidden md:block">Copy Config</span>
+              <span className="hidden md:block">{t("copyConfig")}</span>
            </Button>
            <Button
              size="sm"
              className="flex items-center gap-2"
-              aria-label="Save and restart"
+              aria-label={t("saveAndRestart")}
              onClick={handleSaveAndRestart}
            >
              <div className="relative size-5">
                <LuSave className="absolute left-0 top-0 size-3 text-secondary-foreground" />
                <MdOutlineRestartAlt className="absolute size-4 translate-x-1 translate-y-1/2 text-secondary-foreground" />
              </div>
-              <span className="hidden md:block">Save & Restart</span>
+              <span className="hidden md:block">{t("saveAndRestart")}</span>
            </Button>
            <Button
              size="sm"
              className="flex items-center gap-2"
-              aria-label="Save only without restarting"
+              aria-label={t("saveOnly")}
              onClick={() => onHandleSaveConfig("saveonly")}
            >
              <LuSave className="text-secondary-foreground" />
-              <span className="hidden md:block">Save Only</span>
+              <span className="hidden md:block">{t("saveOnly")}</span>
            </Button>
          </div>
        </div>
@@ -23,9 +23,12 @@ import EventView from "@/views/events/EventView";
 import { RecordingView } from "@/views/recording/RecordingView";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import useSWR from "swr";

 export default function Events() {
+  const { t } = useTranslation(["views/events"]);
+
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -77,11 +80,11 @@ export default function Events() {

  useEffect(() => {
    if (recording) {
-      document.title = "Recordings - Frigate";
+      document.title = t("recordings.documentTitle");
    } else {
-      document.title = `Review - Frigate`;
+      document.title = t("documentTitle");
    }
-  }, [recording, severity]);
+  }, [recording, severity, t]);

  // review filter

@@ -15,6 +15,7 @@ import { formatSecondsToDuration } from "@/utils/dateUtil";
 import SearchView from "@/views/search/SearchView";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobileOnly } from "react-device-detect";
+import { useTranslation } from "react-i18next";
 import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
 import { TbExclamationCircle } from "react-icons/tb";
 import { Link } from "react-router-dom";
@@ -27,6 +28,8 @@ const API_LIMIT = 25;
 export default function Explore() {
  // search field handler

+  const { t } = useTranslation(["views/explore"]);
+
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -201,7 +204,9 @@ export default function Explore() {
    revalidateAll: false,
    onError: (error) => {
      toast.error(
-        `Error fetching tracked objects: ${error.response.data.message}`,
+        t("fetchingTrackedObjectsFailed", {
+          errorMessage: error.response.data.message,
+        }),
        {
          position: "top-center",
        },
@@ -357,13 +362,12 @@ export default function Explore() {
          <div className="flex max-w-96 flex-col items-center justify-center space-y-3 rounded-lg bg-background/50 p-5">
            <div className="my-5 flex flex-col items-center gap-2 text-xl">
              <TbExclamationCircle className="mb-3 size-10" />
-              <div>Explore is Unavailable</div>
+              <div>{t("exploreIsUnavailable.title")}</div>
            </div>
            {embeddingsReindexing && allModelsLoaded && (
              <>
                <div className="text-center text-primary-variant">
-                  Explore can be used after tracked object embeddings have
-                  finished reindexing.
+                  {t("exploreIsUnavailable.embeddingsReindexing.context")}
                </div>
                <div className="pt-5 text-center">
                  <AnimatedCircularProgressBar
@@ -379,29 +383,35 @@ export default function Explore() {
                    <div className="mb-3 flex flex-col items-center justify-center gap-1">
                      <div className="text-primary-variant">
                        {reindexState.time_remaining === -1
-                          ? "Starting up..."
-                          : "Estimated time remaining:"}
+                          ? t(
+                              "exploreIsUnavailable.embeddingsReindexing.startingUp",
+                            )
+                          : t(
+                              "exploreIsUnavailable.embeddingsReindexing.estimatedTime",
+                            )}
                      </div>
                      {reindexState.time_remaining >= 0 &&
                        (formatSecondsToDuration(reindexState.time_remaining) ||
-                          "Finishing shortly")}
+                          t(
+                            "exploreIsUnavailable.embeddingsReindexing.finishingShortly",
+                          ))}
                    </div>
                  )}
                  <div className="flex flex-row items-center justify-center gap-3">
                    <span className="text-primary-variant">
-                      Thumbnails embedded:
+                      t("exploreIsUnavailable.embeddingsReindexing.step.thumbnailsEmbedded")
                    </span>
                    {reindexState.thumbnails}
                  </div>
                  <div className="flex flex-row items-center justify-center gap-3">
                    <span className="text-primary-variant">
-                      Descriptions embedded:
+                      t("exploreIsUnavailable.embeddingsReindexing.step.descriptionsEmbedded")
                    </span>
                    {reindexState.descriptions}
                  </div>
                  <div className="flex flex-row items-center justify-center gap-3">
                    <span className="text-primary-variant">
-                      Tracked objects processed:
+                      t("exploreIsUnavailable.embeddingsReindexing.step.trackedObjectsProcessed")
                    </span>
                    {reindexState.processed_objects} /{" "}
                    {reindexState.total_objects}
@@ -412,26 +422,32 @@ export default function Explore() {
            {!allModelsLoaded && (
              <>
                <div className="text-center text-primary-variant">
-                  Frigate is downloading the necessary embeddings models to
-                  support the Semantic Search feature. This may take several
-                  minutes depending on the speed of your network connection.
+                  {t("exploreIsUnavailable.downloadingModels.context")}
                </div>
                <div className="flex w-96 flex-col gap-2 py-5">
                  <div className="flex flex-row items-center justify-center gap-2">
                    {renderModelStateIcon(visionModelState)}
-                    Vision model
+                    {t(
+                      "exploreIsUnavailable.downloadingModels.setup.visionModel",
+                    )}
                  </div>
                  <div className="flex flex-row items-center justify-center gap-2">
                    {renderModelStateIcon(visionFeatureExtractorState)}
-                    Vision model feature extractor
+                    {t(
+                      "exploreIsUnavailable.downloadingModels.setup.visionModelFeatureExtractor",
+                    )}
                  </div>
                  <div className="flex flex-row items-center justify-center gap-2">
                    {renderModelStateIcon(textModelState)}
-                    Text model
+                    {t(
+                      "exploreIsUnavailable.downloadingModels.setup.textModel",
+                    )}
                  </div>
                  <div className="flex flex-row items-center justify-center gap-2">
                    {renderModelStateIcon(textTokenizerState)}
-                    Text tokenizer
+                    {t(
+                      "exploreIsUnavailable.downloadingModels.setup.textTokenizer",
+                    )}
                  </div>
                </div>
                {(textModelState === "error" ||
@@ -439,12 +455,11 @@ export default function Explore() {
                  visionModelState === "error" ||
                  visionFeatureExtractorState === "error") && (
                  <div className="my-3 max-w-96 text-center text-danger">
-                    An error has occurred. Check Frigate logs.
+                    {t("exploreIsUnavailable.downloadingModels.error")}
                  </div>
                )}
                <div className="text-center text-primary-variant">
-                  You may want to reindex the embeddings of your tracked objects
-                  once the models are downloaded.
+                  {t("exploreIsUnavailable.downloadingModels.tips.context")}
                </div>
                <div className="flex items-center text-primary-variant">
                  <Link
@@ -453,7 +468,9 @@ export default function Explore() {
                    rel="noopener noreferrer"
                    className="inline"
                  >
-                    Read the documentation{" "}
+                    {t(
+                      "exploreIsUnavailable.downloadingModels.tips.documentation",
+                    )}{" "}
                    <LuExternalLink className="ml-2 inline-flex size-3" />
                  </Link>
                </div>
@@ -17,18 +17,22 @@ import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
+
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+
 import { LuFolderX } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";

 function Exports() {
+  const { t } = useTranslation(["views/exports"]);
  const { data: exports, mutate } = useSWR<Export[]>("exports");

  useEffect(() => {
-    document.title = "Export - Frigate";
-  }, []);
+    document.title = t("documentTitle");
+  }, [t]);

  // Search

@@ -97,12 +101,12 @@ function Exports() {
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to rename export: ${errorMessage}`, {
+          toast.error(t("toast.error.renameExportFailed", { errorMessage }), {
            position: "top-center",
          });
        });
    },
-    [mutate],
+    [mutate, t],
  );

  return (
@@ -115,20 +119,22 @@ function Exports() {
      >
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Export</AlertDialogTitle>
+            <AlertDialogTitle>{t("deleteExport")}</AlertDialogTitle>
            <AlertDialogDescription>
-              Are you sure you want to delete {deleteClip?.exportName}?
+              {t("deleteExport.desc", { exportName: deleteClip?.exportName })}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("button.cancel", { ns: "common" })}
+            </AlertDialogCancel>
            <Button
              className="text-white"
              aria-label="Delete Export"
              variant="destructive"
              onClick={() => onHandleDelete()}
            >
-              Delete
+              {t("button.delete", { ns: "common" })}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -176,7 +182,7 @@ function Exports() {
        <div className="flex w-full items-center justify-center p-2">
          <Input
            className="text-md w-full bg-muted md:w-1/3"
-            placeholder="Search"
+            placeholder={t("search")}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
@@ -204,7 +210,7 @@ function Exports() {
        ) : (
          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
            <LuFolderX className="size-16" />
-            No exports found
+            {t("noExports")}
          </div>
        )}
      </div>
@@ -25,18 +25,21 @@ import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { LuImagePlus, LuRefreshCw, LuScanFace, LuTrash2 } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";

 export default function FaceLibrary() {
+  const { t } = useTranslation(["views/faceLibrary"]);
+
  const { data: config } = useSWR<FrigateConfig>("config");

  // title

  useEffect(() => {
-    document.title = "Face Library - Frigate";
-  }, []);
+    document.title = t("documentTitle");
+  }, [t]);

  const [page, setPage] = useState<string>();
  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
@@ -94,7 +97,7 @@ export default function FaceLibrary() {
          if (resp.status == 200) {
            setUpload(false);
            refreshFaces();
-            toast.success("Successfully uploaded image.", {
+            toast.success(t("toast.success.uploadedImage"), {
              position: "top-center",
            });
          }
@@ -104,12 +107,12 @@ export default function FaceLibrary() {
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to upload image: ${errorMessage}`, {
+          toast.error(t("toast.error.uploadingImageFailed", { errorMessage }), {
            position: "top-center",
          });
        });
    },
-    [pageToggle, refreshFaces],
+    [pageToggle, refreshFaces, t],
  );

  const onAddName = useCallback(
@@ -124,7 +127,7 @@ export default function FaceLibrary() {
          if (resp.status == 200) {
            setAddFace(false);
            refreshFaces();
-            toast.success("Successfully add face library.", {
+            toast.success(t("toast.success.addFaceLibrary"), {
              position: "top-center",
            });
          }
@@ -134,12 +137,12 @@ export default function FaceLibrary() {
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to set face name: ${errorMessage}`, {
+          toast.error(t("toast.error.addFaceLibraryFailed", { errorMessage }), {
            position: "top-center",
          });
        });
    },
-    [refreshFaces],
+    [refreshFaces, t],
  );

  // face multiselect
@@ -176,7 +179,7 @@ export default function FaceLibrary() {
        setSelectedFaces([]);

        if (resp.status == 200) {
-          toast.success(`Successfully deleted face.`, {
+          toast.success(t("toast.success.deletedFace"), {
            position: "top-center",
          });
          refreshFaces();
@@ -187,11 +190,11 @@ export default function FaceLibrary() {
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to delete: ${errorMessage}`, {
+        toast.error(t("toast.error.deleteFaceFailed", { errorMessage }), {
          position: "top-center",
        });
      });
-  }, [selectedFaces, refreshFaces]);
+  }, [selectedFaces, refreshFaces, t]);

  // keyboard

@@ -219,15 +222,15 @@ export default function FaceLibrary() {

      <UploadImageDialog
        open={upload}
-        title="Upload Face Image"
-        description={`Upload an image to scan for faces and include for ${pageToggle}`}
+        title={t("uploadFaceImage.title")}
+        description={t("uploadFaceImage.desc", { pageToggle })}
        setOpen={setUpload}
        onSave={onUploadImage}
      />

      <TextEntryDialog
-        title="Create Face Library"
-        description="Create a new face library"
+        title={t("createFaceLibrary.title")}
+        description={t("createFaceLibrary.desc")}
        open={addFace}
        setOpen={setAddFace}
        onSave={onAddName}
@@ -253,9 +256,9 @@ export default function FaceLibrary() {
                    value="train"
                    className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == "train" ? "" : "*:text-muted-foreground"}`}
                    data-nav-item="train"
-                    aria-label="Select train"
+                    aria-label={t("train.aria")}
                  >
-                    <div>Train</div>
+                    <div>{t("train.title")}</div>
                  </ToggleGroupItem>
                  <div>|</div>
                </>
@@ -267,7 +270,7 @@ export default function FaceLibrary() {
                  className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
                  value={item}
                  data-nav-item={item}
-                  aria-label={`Select ${item}`}
+                  aria-label={t("selectItem", { item })}
                >
                  <div className="capitalize">
                    {item} ({faceData[item].length})
@@ -282,19 +285,19 @@ export default function FaceLibrary() {
          <div className="flex items-center justify-center gap-2">
            <Button className="flex gap-2" onClick={() => onDelete()}>
              <LuTrash2 className="size-7 rounded-md p-1 text-secondary-foreground" />
-              Delete Face Attempts
+              {t("button.deleteFaceAttempts")}
            </Button>
          </div>
        ) : (
          <div className="flex items-center justify-center gap-2">
            <Button className="flex gap-2" onClick={() => setAddFace(true)}>
              <LuScanFace className="size-7 rounded-md p-1 text-secondary-foreground" />
-              Add Face
+              {t("button.addFace")}
            </Button>
            {pageToggle != "train" && (
              <Button className="flex gap-2" onClick={() => setUpload(true)}>
                <LuImagePlus className="size-7 rounded-md p-1 text-secondary-foreground" />
-                Upload Image
+                {t("button.uploadImage")}
              </Button>
            )}
          </div>
@@ -370,6 +373,7 @@ function FaceAttempt({
  onClick,
  onRefresh,
 }: FaceAttemptProps) {
+  const { t } = useTranslation(["views/faceLibrary"]);
  const data = useMemo(() => {
    const parts = image.split("-");

@@ -386,7 +390,7 @@ function FaceAttempt({
        .post(`/faces/train/${trainName}/classify`, { training_file: image })
        .then((resp) => {
          if (resp.status == 200) {
-            toast.success(`Successfully trained face.`, {
+            toast.success(t("toast.success.trainedFace"), {
              position: "top-center",
            });
            onRefresh();
@@ -397,12 +401,12 @@ function FaceAttempt({
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to train: ${errorMessage}`, {
+          toast.error(t("toast.error.trainFailed", { errorMessage }), {
            position: "top-center",
          });
        });
    },
-    [image, onRefresh],
+    [image, onRefresh, t],
  );

  const onReprocess = useCallback(() => {
@@ -410,7 +414,7 @@ function FaceAttempt({
      .post(`/faces/reprocess`, { training_file: image })
      .then((resp) => {
        if (resp.status == 200) {
-          toast.success(`Successfully updated face score.`, {
+          toast.success(t("toast.success.updatedFaceScore"), {
            position: "top-center",
          });
          onRefresh();
@@ -421,11 +425,11 @@ function FaceAttempt({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to update face score: ${errorMessage}`, {
+        toast.error(t("toast.error.updateFaceScoreFailed", { errorMessage }), {
          position: "top-center",
        });
      });
-  }, [image, onRefresh]);
+  }, [image, onRefresh, t]);

  return (
    <div
@@ -463,7 +467,7 @@ function FaceAttempt({
                  </TooltipTrigger>
                </DropdownMenuTrigger>
                <DropdownMenuContent>
-                  <DropdownMenuLabel>Train Face as:</DropdownMenuLabel>
+                  <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
                  {faceNames.map((faceName) => (
                    <DropdownMenuItem
                      key={faceName}
@@ -475,7 +479,7 @@ function FaceAttempt({
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
-              <TooltipContent>Train Face as Person</TooltipContent>
+              <TooltipContent>{t("trainFaceAsPerson")}</TooltipContent>
            </Tooltip>
            <Tooltip>
              <TooltipTrigger>
@@ -484,7 +488,7 @@ function FaceAttempt({
                  onClick={() => onReprocess()}
                />
              </TooltipTrigger>
-              <TooltipContent>Reprocess Face</TooltipContent>
+              <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
            </Tooltip>
          </div>
        </div>
@@ -519,12 +523,13 @@ type FaceImageProps = {
  onRefresh: () => void;
 };
 function FaceImage({ name, image, onRefresh }: FaceImageProps) {
+  const { t } = useTranslation(["views/faceLibrary"]);
  const onDelete = useCallback(() => {
    axios
      .post(`/faces/${name}/delete`, { ids: [image] })
      .then((resp) => {
        if (resp.status == 200) {
-          toast.success(`Successfully deleted face.`, {
+          toast.success(t("toast.success.deletedFace"), {
            position: "top-center",
          });
          onRefresh();
@@ -535,11 +540,11 @@ function FaceImage({ name, image, onRefresh }: FaceImageProps) {
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to delete: ${errorMessage}`, {
+        toast.error(t("toast.error.deleteFaceFailed", { errorMessage }), {
          position: "top-center",
        });
      });
-  }, [name, image, onRefresh]);
+  }, [name, image, onRefresh, t]);

  return (
    <div className="relative flex flex-col rounded-lg">
@@ -559,7 +564,7 @@ function FaceImage({ name, image, onRefresh }: FaceImageProps) {
                  onClick={onDelete}
                />
              </TooltipTrigger>
-              <TooltipContent>Delete Face Attempt</TooltipContent>
+              <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
            </Tooltip>
          </div>
        </div>
@@ -9,10 +9,13 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import LiveBirdseyeView from "@/views/live/LiveBirdseyeView";
 import LiveCameraView from "@/views/live/LiveCameraView";
 import LiveDashboardView from "@/views/live/LiveDashboardView";
+import { useTranslation } from "react-i18next";
+
 import { useEffect, useMemo, useRef } from "react";
 import useSWR from "swr";

 function Live() {
+  const { t } = useTranslation(["views/live"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  // selection
@@ -64,13 +67,17 @@ function Live() {
        .split("_")
        .filter((text) => text)
        .map((text) => text[0].toUpperCase() + text.substring(1));
-      document.title = `${capitalized.join(" ")} - Live - Frigate`;
+      document.title = t("documentTitle.withCamera", {
+        camera: capitalized.join(" "),
+      });
    } else if (cameraGroup && cameraGroup != "default") {
-      document.title = `${cameraGroup[0].toUpperCase()}${cameraGroup.substring(1)} - Live - Frigate`;
+      document.title = t("documentTitle.withCamera", {
+        camera: `${cameraGroup[0].toUpperCase()}${cameraGroup.substring(1)}`,
+      });
    } else {
-      document.title = "Live - Frigate";
+      document.title = t("documentTitle", { ns: "views/live" });
    }
-  }, [cameraGroup, selectedCameraName]);
+  }, [cameraGroup, selectedCameraName, t]);

  // settings

@@ -34,8 +34,10 @@ import { debounce } from "lodash";
 import { isIOS, isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
 import { isInIframe } from "@/utils/isIFrame";
+import { useTranslation } from "react-i18next";

 function Logs() {
+  const { t } = useTranslation(["views/system"]);
  const [logService, setLogService] = useState<LogType>("frigate");
  const tabsRef = useRef<HTMLDivElement | null>(null);
  const lazyLogWrapperRef = useRef<HTMLDivElement>(null);
@@ -47,8 +49,8 @@ function Logs() {
  const lastFetchedIndexRef = useRef(-1);

  useEffect(() => {
-    document.title = `${logService[0].toUpperCase()}${logService.substring(1)} Logs - Frigate`;
-  }, [logService]);
+    document.title = t("documentTitle.logs." + logService);
+  }, [logService, t]);

  useEffect(() => {
    if (tabsRef.current) {
@@ -104,13 +106,16 @@ function Logs() {
      } catch (error) {
        const errorMessage =
          error instanceof Error ? error.message : "An unknown error occurred";
-        toast.error(`Error fetching logs: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("logs.toast.error.fetchingLogsFailed", { errorMessage }),
+          {
+            position: "top-center",
+          },
+        );
      }
      return [];
    },
-    [logService, filterLines],
+    [logService, filterLines, t],
  );

  const fetchInitialLogs = useCallback(async () => {
@@ -132,13 +137,13 @@ function Logs() {
    } catch (error) {
      const errorMessage =
        error instanceof Error ? error.message : "An unknown error occurred";
-      toast.error(`Error fetching logs: ${errorMessage}`, {
+      toast.error(t("logs.toast.error.fetchingLogsFailed", { errorMessage }), {
        position: "top-center",
      });
    } finally {
      setIsLoading(false);
    }
-  }, [logService, filterLines, filterSeverity]);
+  }, [logService, filterLines, filterSeverity, t]);

  const abortControllerRef = useRef<AbortController | null>(null);

@@ -203,10 +208,12 @@ function Logs() {
            error instanceof Error
              ? error.message
              : "An unknown error occurred";
-          toast.error(`Error while streaming logs: ${errorMessage}`);
+          toast.error(
+            t("logs.toast.error.whileStreamingLogs", { errorMessage }),
+          );
        }
      });
-  }, [logService, filterSeverity]);
+  }, [logService, filterSeverity, t]);

  useEffect(() => {
    setIsLoading(true);
@@ -285,13 +292,13 @@ function Logs() {
      fetchInitialLogs()
        .then(() => {
          copy(logs.join("\n"));
-          toast.success("Copied logs to clipboard");
+          toast.success(t("logs.copy.success"));
        })
        .catch(() => {
-          toast.error("Could not copy logs to clipboard");
+          toast.error(t("logs.copy.error"));
        });
    }
-  }, [logs, fetchInitialLogs]);
+  }, [logs, fetchInitialLogs, t]);

  const handleDownloadLogs = useCallback(() => {
    axios
@@ -496,23 +503,25 @@ function Logs() {
        <div className="flex items-center gap-2">
          <Button
            className="flex items-center justify-between gap-2"
-            aria-label="Copy logs to clipboard"
+            aria-label={t("logs.copy.label")}
            size="sm"
            onClick={handleCopyLogs}
          >
            <FaCopy className="text-secondary-foreground" />
            <div className="hidden text-primary md:block">
-              Copy to Clipboard
+              {t("logs.copy.label")}
            </div>
          </Button>
          <Button
            className="flex items-center justify-between gap-2"
-            aria-label="Download logs"
+            aria-label={t("logs.download.label")}
            size="sm"
            onClick={handleDownloadLogs}
          >
            <FaDownload className="text-secondary-foreground" />
-            <div className="hidden text-primary md:block">Download</div>
+            <div className="hidden text-primary md:block">
+              {t("button.download", { ns: "common" })}
+            </div>
          </Button>
          <LogSettingsButton
            selectedLabels={filterSeverity}
@@ -527,8 +536,10 @@ function Logs() {
        <div className="grid grid-cols-5 *:px-0 *:py-3 *:text-sm *:text-primary/40 md:grid-cols-12">
          <div className="col-span-3 lg:col-span-2">
            <div className="flex w-full flex-row items-center">
-              <div className="ml-1 min-w-16 capitalize lg:min-w-20">Type</div>
-              <div className="mr-3">Timestamp</div>
+              <div className="ml-1 min-w-16 capitalize lg:min-w-20">
+                {t("logs.type.label")}
+              </div>
+              <div className="mr-3">{t("logs.type.timestamp")}</div>
            </div>
          </div>
          <div
@@ -537,7 +548,7 @@ function Logs() {
              logService == "frigate" ? "col-span-2" : "col-span-1",
            )}
          >
-            Tag
+            {t("logs.type.tag")}
          </div>
          <div
            className={cn(
@@ -547,7 +558,7 @@ function Logs() {
                : "md:col-span-8 lg:col-span-9",
            )}
          >
-            <div className="flex flex-1">Message</div>
+            <div className="flex flex-1">{t("logs.type.message")}</div>
          </div>
        </div>

@@ -566,9 +577,7 @@ function Logs() {
                        <TooltipTrigger>
                          <MdCircle className="mr-2 size-2 animate-pulse cursor-default text-selected shadow-selected drop-shadow-md" />
                        </TooltipTrigger>
-                        <TooltipContent>
-                          Logs are streaming from the server
-                        </TooltipContent>
+                        <TooltipContent>{t("logs.tips")}</TooltipContent>
                      </Tooltip>
                    </div>
                  )}
@@ -1,15 +1,17 @@
 import Heading from "@/components/ui/heading";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";

 function NoMatch() {
+  const { t } = useTranslation(["common"]);
  useEffect(() => {
-    document.title = "Not Found - Frigate";
-  }, []);
+    document.title = t("notFound.documentTitle");
+  }, [t]);

  return (
    <>
-      <Heading as="h2">404</Heading>
-      <p>Page not found</p>
+      <Heading as="h2">{t("notFound.title")}</Heading>
+      <p>{t("notFound.desc")}</p>
    </>
  );
 }
@@ -43,13 +43,14 @@ import { useInitialCameraState } from "@/api/ws";
 import { isInIframe } from "@/utils/isIFrame";
 import { isPWA } from "@/utils/isPWA";
 import { useIsAdmin } from "@/hooks/use-is-admin";
+import { useTranslation } from "react-i18next";

 const allSettingsViews = [
-  "UI settings",
-  "classification settings",
-  "camera settings",
-  "masks / zones",
-  "motion tuner",
+  "uiSettings",
+  "classificationSettings",
+  "cameraSettings",
+  "masksAndZones",
+  "motionTuner",
  "debug",
  "users",
  "notifications",
@@ -57,7 +58,8 @@ const allSettingsViews = [
 type SettingsType = (typeof allSettingsViews)[number];

 export default function Settings() {
-  const [page, setPage] = useState<SettingsType>("UI settings");
+  const { t } = useTranslation(["views/settings"]);
+  const [page, setPage] = useState<SettingsType>("uiSettings");
  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
  const tabsRef = useRef<HTMLDivElement | null>(null);

@@ -69,7 +71,7 @@ export default function Settings() {

  const isAdmin = useIsAdmin();

-  const allowedViewsForViewer: SettingsType[] = ["UI settings", "debug"];
+  const allowedViewsForViewer: SettingsType[] = ["uiSettings", "debug"];
  const visibleSettingsViews = !isAdmin
    ? allowedViewsForViewer
    : allSettingsViews;
@@ -133,7 +135,7 @@ export default function Settings() {
        setSelectedCamera(firstEnabledCamera.name);
      } else if (
        !cameraEnabledStates[selectedCamera] &&
-        page !== "camera settings"
+        page !== "cameraSettings"
      ) {
        // Switch to first enabled camera if current one is disabled, unless on "camera settings" page
        const firstEnabledCamera =
@@ -163,8 +165,8 @@ export default function Settings() {
  useSearchEffect("page", (page: string) => {
    if (allSettingsViews.includes(page as SettingsType)) {
      // Restrict viewer to UI settings
-      if (!isAdmin && !["UI settings", "debug"].includes(page)) {
-        setPage("UI settings");
+      if (!isAdmin && !["uiSettings", "debug"].includes(page)) {
+        setPage("uiSettings");
      } else {
        setPage(page as SettingsType);
      }
@@ -183,8 +185,8 @@ export default function Settings() {
  });

  useEffect(() => {
-    document.title = "Settings - Frigate";
-  }, []);
+    document.title = t("documentTitle.default");
+  }, [t]);

  return (
    <div className="flex size-full flex-col p-2">
@@ -199,8 +201,8 @@ export default function Settings() {
              onValueChange={(value: SettingsType) => {
                if (value) {
                  // Restrict viewer navigation
-                  if (!isAdmin && !["UI settings", "debug"].includes(value)) {
-                    setPageToggle("UI settings");
+                  if (!isAdmin && !["uiSettings", "debug"].includes(value)) {
+                    setPageToggle("uiSettings");
                  } else {
                    setPageToggle(value);
                  }
@@ -210,12 +212,15 @@ export default function Settings() {
              {visibleSettingsViews.map((item) => (
                <ToggleGroupItem
                  key={item}
-                  className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "UI settings" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                  className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "uiSettings" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
                  value={item}
                  data-nav-item={item}
-                  aria-label={`Select ${item}`}
+                  aria-label={t("selectItem", {
+                    item: t("menu." + item),
+                    ns: "common",
+                  })}
                >
-                  <div className="capitalize">{item}</div>
+                  <div className="capitalize">{t("menu." + item)}</div>
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
@@ -223,11 +228,11 @@ export default function Settings() {
          </div>
        </ScrollArea>
        {(page == "debug" ||
-          page == "camera settings" ||
-          page == "masks / zones" ||
-          page == "motion tuner") && (
+          page == "cameraSettings" ||
+          page == "masksAndZones" ||
+          page == "motionTuner") && (
          <div className="ml-2 flex flex-shrink-0 items-center gap-2">
-            {page == "masks / zones" && (
+            {page == "masksAndZones" && (
              <ZoneMaskFilterButton
                selectedZoneMask={filterZoneMask}
                updateZoneMaskFilter={setFilterZoneMask}
@@ -244,27 +249,27 @@ export default function Settings() {
        )}
      </div>
      <div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
-        {page == "UI settings" && <UiSettingsView />}
-        {page == "classification settings" && (
+        {page == "uiSettings" && <UiSettingsView />}
+        {page == "classificationSettings" && (
          <ClassificationSettingsView setUnsavedChanges={setUnsavedChanges} />
        )}
        {page == "debug" && (
          <ObjectSettingsView selectedCamera={selectedCamera} />
        )}
-        {page == "camera settings" && (
+        {page == "cameraSettings" && (
          <CameraSettingsView
            selectedCamera={selectedCamera}
            setUnsavedChanges={setUnsavedChanges}
          />
        )}
-        {page == "masks / zones" && (
+        {page == "masksAndZones" && (
          <MasksAndZonesView
            selectedCamera={selectedCamera}
            selectedZoneMask={filterZoneMask}
            setUnsavedChanges={setUnsavedChanges}
          />
        )}
-        {page == "motion tuner" && (
+        {page == "motionTuner" && (
          <MotionTunerView
            selectedCamera={selectedCamera}
            setUnsavedChanges={setUnsavedChanges}
@@ -282,17 +287,19 @@ export default function Settings() {
        >
          <AlertDialogContent>
            <AlertDialogHeader>
-              <AlertDialogTitle>You have unsaved changes.</AlertDialogTitle>
+              <AlertDialogTitle>
+                {t("dialog.unsavedChanges.title")}
+              </AlertDialogTitle>
              <AlertDialogDescription>
-                Do you want to save your changes before continuing?
+                {t("dialog.unsavedChanges.desc")}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel onClick={() => handleDialog(false)}>
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </AlertDialogCancel>
              <AlertDialogAction onClick={() => handleDialog(true)}>
-                Save
+                {t("button.save", { ns: "common" })}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
@@ -317,6 +324,8 @@ function CameraSelectButton({
  cameraEnabledStates,
  currentPage,
 }: CameraSelectButtonProps) {
+  const { t } = useTranslation(["views/settings"]);
+
  const [open, setOpen] = useState(false);

  if (!allCameras.length) {
@@ -332,7 +341,7 @@ function CameraSelectButton({
      <FaVideo className="text-background dark:text-primary" />
      <div className="hidden text-background dark:text-primary md:block">
        {selectedCamera == undefined
-          ? "No Camera"
+          ? t("cameraSetting.noCamera")
          : selectedCamera.replaceAll("_", " ")}
      </div>
    </Button>
@@ -342,7 +351,7 @@ function CameraSelectButton({
      {isMobile && (
        <>
          <DropdownMenuLabel className="flex justify-center">
-            Camera
+            {t("cameraSetting.camera")}
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
        </>
@@ -351,7 +360,7 @@ function CameraSelectButton({
        <div className="flex flex-col gap-2.5">
          {allCameras.map((item) => {
            const isEnabled = cameraEnabledStates[item.name];
-            const isCameraSettingsPage = currentPage === "camera settings";
+            const isCameraSettingsPage = currentPage === "cameraSettings";
            return (
              <FilterSwitch
                key={item.name}
@@ -12,15 +12,16 @@ import Logo from "@/components/Logo";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import CameraMetrics from "@/views/system/CameraMetrics";
 import { useHashState } from "@/hooks/use-overlay-state";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { Toaster } from "@/components/ui/sonner";
 import { FrigateConfig } from "@/types/frigateConfig";
 import FeatureMetrics from "@/views/system/FeatureMetrics";
+import { useTranslation } from "react-i18next";

 const allMetrics = ["general", "features", "storage", "cameras"] as const;
 type SystemMetric = (typeof allMetrics)[number];

 function System() {
+  const { t } = useTranslation(["views/system"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -52,9 +53,9 @@ function System() {

  useEffect(() => {
    if (pageToggle) {
-      document.title = `${capitalizeFirstLetter(pageToggle)} Stats - Frigate`;
+      document.title = t("documentTitle." + pageToggle);
    }
-  }, [pageToggle]);
+  }, [pageToggle, t]);

  // stats collection

@@ -91,7 +92,9 @@ function System() {
              {item == "features" && <LuSearchCode className="size-4" />}
              {item == "storage" && <LuHardDrive className="size-4" />}
              {item == "cameras" && <FaVideo className="size-4" />}
-              {isDesktop && <div className="capitalize">{item}</div>}
+              {isDesktop && (
+                <div className="capitalize">{t(item + ".title")}</div>
+              )}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
@@ -99,13 +102,14 @@ function System() {
        <div className="flex h-full items-center">
          {lastUpdated && (
            <div className="h-full content-center text-sm text-muted-foreground">
-              Last refreshed: <TimeAgo time={lastUpdated * 1000} dense />
+              {t("lastRefreshed")}
+              <TimeAgo time={lastUpdated * 1000} dense />
            </div>
          )}
        </div>
      </div>
      <div className="mt-2 flex items-end gap-2">
-        <div className="h-full content-center font-medium">System</div>
+        <div className="h-full content-center font-medium">{t("title")}</div>
        {statsSnapshot && (
          <div className="h-full content-center text-sm text-muted-foreground">
            {statsSnapshot.service.version}