Merge branch 'main' into maryhipp/informational-popover

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx

@@ -5,6 +5,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
 import ParamClipSkip from './ParamClipSkip';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   stateSelector,
@@ -22,13 +23,13 @@ export default function ParamAdvancedCollapse() {
   const shouldShowAdvancedOptions = useAppSelector(
     (state: RootState) => state.generation.shouldShowAdvancedOptions
   );
-
+  const { t } = useTranslation();
   if (!shouldShowAdvancedOptions) {
     return null;
   }
 
   return (
-    <IAICollapse label="Advanced" activeLabel={activeLabel}>
+    <IAICollapse label={t('common.advanced')} activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamClipSkip />
       </Flex>

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx

@@ -6,6 +6,7 @@ import IAISwitch from 'common/components/IAISwitch';
 import { NoiseUseCPUPopover } from 'features/informationalPopovers/components/noiseUseCPU';
 import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
   stateSelector,
@@ -22,6 +23,7 @@ const selector = createSelector(
 export const ParamCpuNoiseToggle = () => {
   const dispatch = useAppDispatch();
   const { isDisabled, shouldUseCpuNoise } = useAppSelector(selector);
+  const { t } = useTranslation();
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
     dispatch(shouldUseCpuNoiseChanged(e.target.checked));
@@ -30,7 +32,7 @@ export const ParamCpuNoiseToggle = () => {
     <NoiseUseCPUPopover>
       <IAISwitch
         isDisabled={isDisabled}
-        label="Use CPU Noise"
+        label={t('parameters.useCpuNoise')}
         isChecked={shouldUseCpuNoise}
         onChange={handleChange}
       />

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx

@@ -4,9 +4,11 @@ import IAISwitch from 'common/components/IAISwitch';
 import { NoiseEnablePopover } from 'features/informationalPopovers/components/noiseEnable';
 import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
 import { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const ParamNoiseToggle = () => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
 
   const shouldUseNoiseSettings = useAppSelector(
     (state: RootState) => state.generation.shouldUseNoiseSettings
@@ -18,7 +20,7 @@ export const ParamNoiseToggle = () => {
   return (
     <NoiseEnablePopover>
       <IAISwitch
-        label="Enable Noise Settings"
+        label={t('parameters.enableNoiseSettings')}
         isChecked={shouldUseNoiseSettings}
         onChange={handleChange}
       />

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx

@@ -146,7 +146,7 @@ const CancelButton = (props: Props) => {
           id="cancel-button"
           {...rest}
         >
-          Cancel
+          {t('parameters.cancel.cancel')}
         </IAIButton>
       )}
       <Menu closeOnSelect={false}>

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx

@@ -76,7 +76,7 @@ export default function InvokeButton(props: InvokeButton) {
         )}
         {asIconButton ? (
           <IAIIconButton
-            aria-label={t('parameters.invoke')}
+            aria-label={t('parameters.invoke.invoke')}
             type="submit"
             icon={<FaPlay />}
             isDisabled={!isReady}
@@ -96,7 +96,7 @@ export default function InvokeButton(props: InvokeButton) {
         ) : (
           <IAIButton
             tooltip={<InvokeButtonTooltipContent />}
-            aria-label={t('parameters.invoke')}
+            aria-label={t('parameters.invoke.invoke')}
             type="submit"
             data-progress={isProcessing}
             isDisabled={!isReady}
@@ -105,7 +105,7 @@ export default function InvokeButton(props: InvokeButton) {
             id="invoke-button"
             leftIcon={isProcessing ? undefined : <FaPlay />}
             isLoading={isProcessing}
-            loadingText={t('parameters.invoke')}
+            loadingText={t('parameters.invoke.invoke')}
             sx={{
               w: 'full',
               flexGrow: 1,
@@ -138,11 +138,14 @@ export const InvokeButtonTooltipContent = memo(() => {
   const { isReady, reasons } = useIsReadyToInvoke();
   const { autoAddBoardId } = useAppSelector(tooltipSelector);
   const autoAddBoardName = useBoardName(autoAddBoardId);
+  const { t } = useTranslation();
 
   return (
     <Flex flexDir="column" gap={1}>
       <Text fontWeight={600}>
-        {isReady ? 'Ready to Invoke' : 'Unable to Invoke'}
+        {isReady
+          ? t('parameters.invoke.readyToInvoke')
+          : t('parameters.invoke.unableToInvoke')}
       </Text>
       {reasons.length > 0 && (
         <UnorderedList>
@@ -159,7 +162,7 @@ export const InvokeButtonTooltipContent = memo(() => {
         _dark={{ borderColor: 'base.900' }}
       />
       <Text fontWeight={400} fontStyle="oblique 10deg">
-        Adding images to{' '}
+        {t('parameters.invoke.addingImagesTo')}{' '}
         <Text as="span" fontWeight={600}>
           {autoAddBoardName || 'Uncategorized'}
         </Text>