feat(ui): add missing translation strings

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

@@ -114,6 +114,9 @@
         "t2iAdapter": "T2I Adapter",
         "positivePrompt": "Positive Prompt",
         "negativePrompt": "Negative Prompt",
+        "removeNegativePrompt": "Remove Negative Prompt",
+        "addNegativePrompt": "Add Negative Prompt",
+        "selectYourModel": "Select Your Model",
         "discordLabel": "Discord",
         "dontAskMeAgain": "Don't ask me again",
         "dontShowMeThese": "Don't show me these",

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover/GallerySettingsPopover.tsx

@@ -40,7 +40,7 @@ export const GallerySettingsPopover = memo(() => {
           <PopoverBody>
             <Flex direction="column" gap={2}>
               <Text fontWeight="semibold" color="base.300">
-                Gallery Settings
+                {t('gallery.gallerySettings')}
               </Text>
 
               <Divider />

invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx

@@ -2,9 +2,11 @@ import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { negativePromptChanged, selectHasNegativePrompt } from 'features/controlLayers/store/paramsSlice';
 import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PiPlusMinusBold } from 'react-icons/pi';
 
 export const NegativePromptToggleButton = memo(() => {
+  const { t } = useTranslation();
   const hasNegativePrompt = useAppSelector(selectHasNegativePrompt);
 
   const dispatch = useAppDispatch();
@@ -18,8 +20,8 @@ export const NegativePromptToggleButton = memo(() => {
   }, [dispatch, hasNegativePrompt]);
 
   const label = useMemo(
-    () => (hasNegativePrompt ? 'Remove Negative Prompt' : 'Add Negative Prompt'),
-    [hasNegativePrompt]
+    () => (hasNegativePrompt ? t('common.removeNegativePrompt') : t('common.addNegativePrompt')),
+    [hasNegativePrompt, t]
   );
 
   return (

invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx

@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import type { IDockviewPanelProps, IGridviewPanelProps } from 'dockview';
 import { selectSystemShouldEnableHighlightFocusedRegions } from 'features/system/store/systemSlice';
-import type { PanelParameters } from 'features/ui/layouts/auto-layout-context';
+import type { DockviewPanelParameters, GridviewPanelParameters } from 'features/ui/layouts/auto-layout-context';
 import type { PropsWithChildren } from 'react';
 import { memo, useRef } from 'react';
 
@@ -30,8 +30,8 @@ const sx: SystemStyleObject = {
 export const AutoLayoutPanelContainer = memo(
   (
     props:
-      | PropsWithChildren<IDockviewPanelProps<PanelParameters>>
-      | PropsWithChildren<IGridviewPanelProps<PanelParameters>>
+      | PropsWithChildren<IDockviewPanelProps<DockviewPanelParameters>>
+      | PropsWithChildren<IGridviewPanelProps<GridviewPanelParameters>>
   ) => {
     const ref = useRef<HTMLDivElement>(null);
     const shouldHighlightFocusedRegions = useAppSelector(selectSystemShouldEnableHighlightFocusedRegions);

invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx

@@ -3,10 +3,12 @@ import { setFocusedRegion } from 'common/hooks/focus';
 import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import type { IDockviewPanelHeaderProps } from 'dockview';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTab = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTab = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const setActive = useCallback(() => {
     if (!props.api.isActive) {
@@ -23,7 +25,7 @@ export const DockviewTab = memo((props: IDockviewPanelHeaderProps<PanelParameter
   return (
     <Flex ref={ref} alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
     </Flex>
   );

invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx

@@ -5,11 +5,13 @@ import type { IDockviewPanelHeaderProps } from 'dockview';
 import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const isGenerationInProgress = useIsGenerationInProgress();
   const currentQueueItemDestination = useCurrentQueueItemDestination();
 
@@ -29,7 +31,7 @@ export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<Pa
   return (
     <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
       {currentQueueItemDestination === 'canvas' && isGenerationInProgress && (
         <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />

invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx

@@ -7,11 +7,13 @@ import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagin
 import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const isGenerationInProgress = useIsGenerationInProgress();
   const canvasSessionId = useAppSelector(selectCanvasSessionId);
   const currentQueueItemDestination = useCurrentQueueItemDestination();
@@ -32,7 +34,7 @@ export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps
   return (
     <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
       {currentQueueItemDestination === canvasSessionId && isGenerationInProgress && (
         <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />

invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx

@@ -6,6 +6,7 @@ import type { IDockviewPanelHeaderProps } from 'dockview';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import type { TabName } from 'features/ui/store/uiTypes';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { IconType } from 'react-icons';
 import {
   PiBoundingBoxBold,
@@ -16,6 +17,8 @@ import {
   PiTextAaBold,
 } from 'react-icons/pi';
 
+import type { DockviewPanelParameters } from './auto-layout-context';
+
 const TAB_ICONS: Record<TabName, IconType> = {
   generate: PiTextAaBold,
   canvas: PiBoundingBoxBold,
@@ -25,7 +28,8 @@ const TAB_ICONS: Record<TabName, IconType> = {
   queue: PiQueueBold,
 };
 
-export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
+export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const activeTab = useAppSelector(selectActiveTab);
 
@@ -44,7 +48,7 @@ export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
   return (
     <Flex ref={ref} alignItems="center" h="full" px={4} gap={3} onPointerDown={onPointerDown}>
       <Icon as={TAB_ICONS[activeTab]} color="invokeYellow.300" boxSize={5} />
-      <Text userSelect="none">{props.api.title ?? props.api.id}</Text>
+      <Text userSelect="none">{t(props.params.i18nKey)}</Text>
     </Flex>
   );
 });

invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx

@@ -4,11 +4,13 @@ import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import type { IDockviewPanelHeaderProps } from 'dockview';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const isGenerationInProgress = useIsGenerationInProgress();
 
   const ref = useRef<HTMLDivElement>(null);
@@ -27,7 +29,7 @@ export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<PanelP
   return (
     <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
       {isGenerationInProgress && (
         <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />

invokeai/frontend/web/src/features/ui/layouts/InitialStateMainModelPicker.tsx

@@ -4,12 +4,14 @@ import { InformationalPopover } from 'common/components/InformationalPopover/Inf
 import { ModelPicker } from 'features/parameters/components/ModelPicker';
 import { modelSelected } from 'features/parameters/store/actions';
 import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MdMoneyOff } from 'react-icons/md';
 import { useMainModels } from 'services/api/hooks/modelsByType';
 import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
 import { type AnyModelConfig, isCheckpointMainModelConfig } from 'services/api/types';
 
 export const InitialStateMainModelPicker = memo(() => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const [modelConfigs] = useMainModels();
   const selectedModelConfig = useSelectedModelConfig();
@@ -31,7 +33,7 @@ export const InitialStateMainModelPicker = memo(() => {
   return (
     <FormControl orientation="vertical" alignItems="unset">
       <FormLabel display="flex" fontSize="md" gap={2}>
-        Select your Model{' '}
+        {t('common.selectYourModel')}{' '}
         {isFluxDevSelected && (
           <InformationalPopover feature="fluxDevLicense" hideDisable={true}>
             <Flex justifyContent="flex-start">

invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx

@@ -27,15 +27,30 @@ export const useAutoLayoutContext = () => {
   return value;
 };
 
-export type PanelParameters = {
+export type DockviewPanelParameters = {
   tab: TabName;
   focusRegion: FocusRegionName;
+  i18nKey: string;
 };
 
-export type AutoLayoutGridviewComponents = Record<string, FunctionComponent<IGridviewPanelProps<PanelParameters>>>;
-export type AutoLayoutDockviewComponents = Record<string, FunctionComponent<IDockviewPanelProps<PanelParameters>>>;
-export type RootLayoutGridviewComponents = Record<string, FunctionComponent<IGridviewPanelProps<PanelParameters>>>;
-type PanelProps = IDockviewPanelProps<PanelParameters> | IGridviewPanelProps<PanelParameters>;
+export type GridviewPanelParameters = {
+  tab: TabName;
+  focusRegion: FocusRegionName;
+};
+
+export type AutoLayoutGridviewComponents = Record<
+  string,
+  FunctionComponent<IGridviewPanelProps<GridviewPanelParameters>>
+>;
+export type AutoLayoutDockviewComponents = Record<
+  string,
+  FunctionComponent<IDockviewPanelProps<DockviewPanelParameters>>
+>;
+export type RootLayoutGridviewComponents = Record<
+  string,
+  FunctionComponent<IGridviewPanelProps<GridviewPanelParameters>>
+>;
+type PanelProps = IDockviewPanelProps<DockviewPanelParameters> | IGridviewPanelProps<GridviewPanelParameters>;
 
 export const withPanelContainer = (Component: FunctionComponent) =>
   /* eslint-disable-next-line  react/display-name */

invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx

@@ -9,7 +9,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP
 import type {
   AutoLayoutDockviewComponents,
   AutoLayoutGridviewComponents,
-  PanelParameters,
+  DockviewPanelParameters,
+  GridviewPanelParameters,
   RootLayoutGridviewComponents,
 } from 'features/ui/layouts/auto-layout-context';
 import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context';
@@ -63,40 +64,43 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
 
 const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {
   navigationApi.registerContainer(tab, 'main', api, () => {
-    const launchpad = api.addPanel<PanelParameters>({
+    const launchpad = api.addPanel<DockviewPanelParameters>({
       id: LAUNCHPAD_PANEL_ID,
       component: LAUNCHPAD_PANEL_ID,
       title: t('ui.panels.launchpad'),
       tabComponent: DOCKVIEW_TAB_LAUNCHPAD_ID,
       params: {
         tab,
         focusRegion: 'launchpad',
+        i18nKey: 'ui.panels.launchpad',
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: WORKSPACE_PANEL_ID,
       component: WORKSPACE_PANEL_ID,
       title: t('ui.panels.canvas'),
       tabComponent: DOCKVIEW_TAB_CANVAS_WORKSPACE_ID,
       params: {
         tab,
         focusRegion: 'canvas',
+        i18nKey: 'ui.panels.canvas',
       },
       position: {
         direction: 'within',
         referencePanel: launchpad.id,
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: VIEWER_PANEL_ID,
       component: VIEWER_PANEL_ID,
       title: t('ui.panels.imageViewer'),
       tabComponent: DOCKVIEW_TAB_CANVAS_VIEWER_ID,
       params: {
         tab,
         focusRegion: 'viewer',
+        i18nKey: 'ui.panels.imageViewer',
       },
       position: {
         direction: 'within',
@@ -145,7 +149,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'right', api, () => {
-    const gallery = api.addPanel<PanelParameters>({
+    const gallery = api.addPanel<GridviewPanelParameters>({
       id: GALLERY_PANEL_ID,
       component: GALLERY_PANEL_ID,
       minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,
@@ -156,7 +160,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    const boards = api.addPanel<PanelParameters>({
+    const boards = api.addPanel<GridviewPanelParameters>({
       id: BOARDS_PANEL_ID,
       component: BOARDS_PANEL_ID,
       minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX,
@@ -170,7 +174,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: LAYERS_PANEL_ID,
       component: LAYERS_PANEL_ID,
       minimumHeight: LAYERS_PANEL_MIN_HEIGHT_PX,
@@ -215,7 +219,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'left', api, () => {
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: SETTINGS_PANEL_ID,
       component: SETTINGS_PANEL_ID,
       params: {