fix(ui): replace all hardcoded frontend strings with i18n translation keys

invokeai/frontend/web/public/locales/en.json

@@ -224,57 +224,75 @@
         "discordLabel": "Discord",
         "dontAskMeAgain": "Don't ask me again",
         "dontShowMeThese": "Don't show me these",
+        "editName": "Edit name",
         "editor": "Editor",
         "error": "Error",
         "error_withCount_one": "{{count}} error",
         "error_withCount_other": "{{count}} errors",
         "model_withCount_one": "{{count}} model",
         "model_withCount_other": "{{count}} models",
         "file": "File",
+        "fitView": "Fit View",
         "folder": "Folder",
         "format": "format",
         "githubLabel": "Github",
         "goTo": "Go to",
         "hotkeysLabel": "Hotkeys",
-        "loadingImage": "Loading Image",
-        "loadingModel": "Loading Model",
+        "hex": "Hex",
         "imageFailedToLoad": "Unable to Load Image",
         "img2img": "Image To Image",
         "inpaint": "inpaint",
         "input": "Input",
         "installed": "Installed",
+        "json": "JSON",
         "languagePickerLabel": "Language",
         "linear": "Linear",
         "load": "Load",
         "loading": "Loading",
+        "loadingImage": "Loading Image",
+        "loadingModel": "Loading Model",
         "localSystem": "Local System",
+        "minimize": "Minimize",
+        "next": "Next",
+        "noMatchingItems": "No matching items",
+        "notifications": "Notifications",
         "learnMore": "Learn More",
         "modelManager": "Model Manager",
         "noMatches": "No matches",
         "noOptions": "No options",
         "nodes": "Workflows",
         "notInstalled": "Not $t(common.installed)",
+        "openSlider": "Open slider",
         "openInNewTab": "Open in New Tab",
         "openInViewer": "Open in Viewer",
         "orderBy": "Order By",
         "outpaint": "outpaint",
         "outputs": "Outputs",
         "postprocessing": "Post Processing",
+        "previous": "Previous",
         "random": "Random",
+        "removeFromCollection": "Remove from Collection",
         "reportBugLabel": "Report Bug",
+        "resetView": "Reset View",
         "safetensors": "Safetensors",
         "save": "Save",
         "saveAs": "Save As",
         "saveChanges": "Save Changes",
+        "saveToAssets": "Save to Assets",
+        "settings": "Settings",
         "settingsLabel": "Settings",
         "simple": "Simple",
         "somethingWentWrong": "Something went wrong",
         "statusDisconnected": "Disconnected",
         "template": "Template",
+        "toggleRgbHex": "Toggle RGB/HEX",
         "toResolve": "To resolve",
         "txt2img": "Text To Image",
         "unknown": "Unknown",
+        "unpin": "Unpin",
         "upload": "Upload",
+        "zoomIn": "Zoom In",
+        "zoomOut": "Zoom Out",
         "updated": "Updated",
         "created": "Created",
         "prevPage": "Previous Page",
@@ -344,13 +362,19 @@
         "discard": "Discard",
         "noPromptHistory": "No prompt history recorded.",
         "noMatchingPrompts": "No matching prompts in history.",
-        "toSwitchBetweenPrompts": "to switch between prompts."
+        "toSwitchBetweenPrompts": "to switch between prompts.",
+        "promptHistory": "Prompt History",
+        "clearHistory": "Clear History",
+        "usePrompt": "Use prompt",
+        "searchPrompts": "Search..."
     },
     "queue": {
         "queue": "Queue",
         "queueFront": "Add to Front of Queue",
         "queueBack": "Add to Queue",
+        "queueActionsMenu": "Queue Actions Menu",
         "queueEmpty": "Queue Empty",
+        "queueItem": "Queue Item",
         "enqueueing": "Queueing Batch",
         "resume": "Resume",
         "resumeTooltip": "Resume Processor",
@@ -493,7 +517,10 @@
         "imagesSettings": "Gallery Images Settings",
         "jump": "Jump",
         "loading": "Loading",
+        "loadingGallery": "Loading gallery...",
+        "loadingMetadata": "Loading metadata...",
         "newestFirst": "Newest First",
+        "noImagesFound": "No images found",
         "oldestFirst": "Oldest First",
         "sortDirection": "Sort Direction",
         "showStarredImagesFirst": "Show Starred Images First",
@@ -505,6 +532,8 @@
         "unableToLoad": "Unable to load Gallery",
         "deleteSelection": "Delete Selection",
         "downloadSelection": "Download Selection",
+        "bulkDownloadReady": "Download ready",
+        "clickToDownload": "Click here to download",
         "bulkDownloadRequested": "Preparing Download",
         "bulkDownloadRequestedDesc": "Your download request is being prepared. This may take a few moments.",
         "bulkDownloadRequestFailed": "Problem Preparing Download",
@@ -936,7 +965,8 @@
         }
     },
     "lora": {
-        "weight": "Weight"
+        "weight": "Weight",
+        "removeLoRA": "Remove LoRA"
     },
     "metadata": {
         "allPrompts": "All Prompts",
@@ -983,6 +1013,14 @@
     "modelManager": {
         "active": "active",
         "actions": "Bulk Actions",
+        "deleteModelsConfirm": "Are you sure you want to delete {{count}} model(s)? This action cannot be undone.",
+        "deleteWarning": "Models in your Invoke models directory will be permanently deleted from disk.",
+        "modelsDeleted": "Successfully deleted {{count}} model(s)",
+        "modelsDeleteFailed": "Failed to delete models",
+        "someModelsFailedToDelete": "{{count}} model(s) could not be deleted",
+        "modelsDeletedPartial": "Partially completed",
+        "someModelsDeleted": "{{deleted}} deleted, {{failed}} failed",
+        "modelsDeleteError": "Error deleting models",
         "pause": "Pause",
         "pauseAll": "Pause All",
         "pauseAllTooltip": "Pause all active downloads",
@@ -1331,6 +1369,7 @@
         "noWorkflows": "No Workflows",
         "noMatchingWorkflows": "No Matching Workflows",
         "noWorkflow": "No Workflow",
+        "noWorkflowToSave": "No workflow to save",
         "unableToUpdateNode": "Node update failed: node {{node}} of type {{type}} (may require deleting and recreating)",
         "mismatchedVersion": "Invalid node: node {{node}} of type {{type}} has mismatched version (try updating?)",
         "missingTemplate": "Invalid node: node {{node}} of type {{type}} missing template (not installed?)",
@@ -1354,6 +1393,7 @@
         "nodeOpacity": "Node Opacity",
         "nodeVersion": "Node Version",
         "noOutputRecorded": "No outputs recorded",
+        "nodeData": "Node Data",
         "notes": "Notes",
         "description": "Description",
         "notesDescription": "Add notes about your workflow",
@@ -1603,6 +1643,7 @@
             "perPromptDesc": "Use a different seed for each image"
         },
         "loading": "Generating Dynamic Prompts...",
+        "problemGeneratingPrompts": "Problem generating prompts",
         "promptsToGenerate": "Prompts to Generate"
     },
     "sdxl": {
@@ -2479,6 +2520,8 @@
         "disableAutoNegative": "Disable Auto Negative",
         "deletePrompt": "Delete Prompt",
         "deleteReferenceImage": "Delete Reference Image",
+        "disableReferenceImage": "Disable Reference Image",
+        "enableReferenceImage": "Enable Reference Image",
         "showHUD": "Show HUD",
         "rectangle": "Rectangle",
         "maskFill": "Mask Fill",
@@ -2499,14 +2542,18 @@
         "controlLayer": "Control Layer",
         "inpaintMask": "Inpaint Mask",
         "invertMask": "Invert Mask",
+        "invertRegion": "Invert Region",
         "regionalGuidance": "Regional Guidance",
         "referenceImageRegional": "Reference Image (Regional)",
         "referenceImageGlobal": "Reference Image (Global)",
         "asRasterLayer": "As $t(controlLayers.rasterLayer)",
         "asRasterLayerResize": "As $t(controlLayers.rasterLayer) (Resize)",
         "asControlLayer": "As $t(controlLayers.controlLayer)",
         "asControlLayerResize": "As $t(controlLayers.controlLayer) (Resize)",
+        "invalidReferenceImage": "Invalid Reference Image:",
         "referenceImage": "Reference Image",
+        "removeImageFromCollection": "Remove Image from Collection",
+        "selectRefImage": "Select Ref Image",
         "maxRefImages": "Max Ref Images",
         "useAsReferenceImage": "Use as Reference Image",
         "regionalReferenceImage": "Regional Reference Image",
@@ -2527,7 +2574,11 @@
             "alignLeft": "Align Left",
             "alignCenter": "Align Center",
             "alignRight": "Align Right",
-            "px": "px"
+            "px": "px",
+            "lineHeight": "Spacing",
+            "lineHeightDense": "Dense",
+            "lineHeightNormal": "Normal",
+            "lineHeightSpacious": "Spacious"
         },
         "newCanvasFromImage": "New Canvas from Image",
         "newImg2ImgCanvasFromImage": "New Img2Img from Image",
@@ -2674,7 +2725,8 @@
             "crosshatch": "Crosshatch",
             "vertical": "Vertical",
             "horizontal": "Horizontal",
-            "diagonal": "Diagonal"
+            "diagonal": "Diagonal",
+            "switchColors": "Switch FG/BG (X)"
         },
         "gradient": {
             "linear": "Linear",
@@ -2938,8 +2990,11 @@
         },
         "autoSwitch": {
             "off": "Off",
+            "doNotAutoSwitch": "Do not auto-switch",
             "switchOnStart": "On Start",
-            "switchOnFinish": "On Finish"
+            "switchOnStartDesc": "Switch on start",
+            "switchOnFinish": "On Finish",
+            "switchOnFinishDesc": "Switch on finish"
         }
     },
     "upscaling": {
@@ -3158,9 +3213,21 @@
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
         "watchUiUpdatesOverview": "Watch UI Updates Overview"
     },
+    "cropper": {
+        "cropImage": "Crop Image",
+        "aspectRatio": "Aspect Ratio",
+        "free": "Free",
+        "mouseWheelZoom": "Mouse wheel: Zoom",
+        "spaceDragPan": "Space + Drag: Pan",
+        "dragCropBoxToAdjust": "Drag crop box or handles to adjust"
+    },
     "supportVideos": {
         "supportVideos": "Support Videos",
         "gettingStarted": "Getting Started",
+        "gettingStartedPlaylist": "Getting Started playlist",
+        "studioSessionsPlaylist": "Studio Sessions playlist",
+        "discord": "Discord",
+        "github": "GitHub",
         "watch": "Watch",
         "studioSessionsDesc": "Join our <DiscordLink /> to participate in the live sessions and ask questions. Sessions are uploaded to the playlist the following week.",
         "videos": {

invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx

@@ -85,7 +85,7 @@ const RgbaColorPicker = (props: Props) => {
               h={10}
               whiteSpace="nowrap"
               onClick={onToggleMode}
-              aria-label="Toggle RGB/HEX"
+              aria-label={t('common.toggleRgbHex')}
             >
               RGB
             </Button>
@@ -144,12 +144,12 @@ const RgbaColorPicker = (props: Props) => {
               h={10}
               whiteSpace="nowrap"
               onClick={onToggleMode}
-              aria-label="Toggle RGB/HEX"
+              aria-label={t('common.toggleRgbHex')}
             >
               HEX
             </Button>
             <FormControl gap={0}>
-              <FormLabel>{t('common.hex', { defaultValue: 'Hex' })}</FormLabel>
+              <FormLabel>{t('common.hex')}</FormLabel>
               <Input value={hex} onChange={onChangeHex} placeholder="#RRGGBB or #RRGGBBAA" w="10rem" />
             </FormControl>
             <FormControl gap={0}>

invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx

@@ -187,11 +187,12 @@ export const UploadImageIconButton = memo(
     onUpload?: (imageDTO: ImageDTO) => void;
     isError?: boolean;
   } & SetOptional<IconButtonProps, 'aria-label'>) => {
+    const { t } = useTranslation();
     const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: false, onUpload });
     return (
       <>
         <IconButton
-          aria-label="Upload image"
+          aria-label={t('accessibility.uploadImage')}
           variant="outline"
           sx={sx}
           data-error={isError}
@@ -213,12 +214,13 @@ type UploadImageButtonProps = {
 } & ButtonProps;
 
 const UploadImageButton = memo((props: UploadImageButtonProps) => {
+  const { t } = useTranslation();
   const { children, isDisabled = false, onUpload, isError = false, ...rest } = props;
   const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: false, onUpload });
   return (
     <>
       <Button
-        aria-label="Upload image"
+        aria-label={t('accessibility.uploadImage')}
         variant="outline"
         sx={sx}
         data-error={isError}
@@ -244,11 +246,12 @@ export const UploadMultipleImageButton = ({
   onUpload?: (imageDTOs: ImageDTO[]) => void;
   isError?: boolean;
 } & SetOptional<IconButtonProps, 'aria-label'>) => {
+  const { t } = useTranslation();
   const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: true, onUpload });
   return (
     <>
       <IconButton
-        aria-label="Upload image"
+        aria-label={t('accessibility.uploadImage')}
         variant="outline"
         sx={sx}
         data-error={isError}

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx

@@ -24,7 +24,7 @@ export const EntityListSelectedEntityActionBarInvertMaskButton = memo(() => {
 
   const label =
     selectedEntityIdentifier.type === 'regional_guidance'
-      ? t('controlLayers.invertRegion', { defaultValue: 'Invert Region' })
+      ? t('controlLayers.invertRegion')
       : t('controlLayers.invertMask');
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx

@@ -155,7 +155,7 @@ export const EntityListSelectedEntityActionBarOpacity = memo(() => {
             <NumberInputField paddingInlineEnd={7} _focusVisible={{ zIndex: 0 }} title="" />
             <PopoverTrigger>
               <IconButton
-                aria-label="open-slider"
+                aria-label={t('common.openSlider')}
                 icon={<PiCaretDownBold />}
                 size="sm"
                 variant="link"

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesAdjustmentsGraph.tsx

@@ -1,6 +1,7 @@
 import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
 import type { ChannelName, ChannelPoints } from 'features/controlLayers/store/types';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
 
 const DEFAULT_POINTS: ChannelPoints = [
@@ -237,6 +238,7 @@ const canvasYToValueY = (c: HTMLCanvasElement, cy: number) => {
 };
 
 export const RasterLayerCurvesAdjustmentsGraph = memo((props: CurveGraphProps) => {
+  const { t } = useTranslation();
   const { title, channel, points, histogram, onChange } = props;
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [localPoints, setLocalPoints] = useState<ChannelPoints>(sortPoints(points ?? DEFAULT_POINTS));
@@ -410,7 +412,7 @@ export const RasterLayerCurvesAdjustmentsGraph = memo((props: CurveGraphProps) =
         </Text>
         <IconButton
           icon={<PiArrowCounterClockwiseBold />}
-          aria-label="Reset"
+          aria-label={t('common.reset')}
           size="sm"
           variant="link"
           onClick={resetPoints}