From 00e3fe525a2af431b6eac405c8864c0c2c31272a Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Mon, 8 May 2023 22:48:00 -0500
Subject: [PATCH] start localizing extras tab

---
 gui/src/components/control/ModelControl.tsx   |  6 +-
 gui/src/components/input/EditableList.tsx     |  8 ++-
 .../input/model/CorrectionModel.tsx           | 14 ++--
 .../components/input/model/DiffusionModel.tsx | 52 +++++++++-----
 .../components/input/model/ExtraNetwork.tsx   | 54 ++++++++------
 .../components/input/model/ExtraSource.tsx    | 54 ++++++++------
 .../components/input/model/UpscalingModel.tsx | 70 ++++++++++++-------
 gui/src/components/tab/Models.tsx             | 34 ++++++---
 gui/src/strings/de.ts                         | 27 ++++++-
 gui/src/strings/en.ts                         | 27 ++++++-
 gui/src/strings/es.ts                         | 27 ++++++-
 gui/src/strings/fr.ts                         | 27 ++++++-
 12 files changed, 281 insertions(+), 119 deletions(-)

diff --git a/gui/src/components/control/ModelControl.tsx b/gui/src/components/control/ModelControl.tsx
index 1d8373686..9e820e367 100644
--- a/gui/src/components/control/ModelControl.tsx
+++ b/gui/src/components/control/ModelControl.tsx
@@ -92,7 +92,7 @@ export function ModelControl() {
       <QueryList
         id='diffusion'
         labelKey='model'
-        name={t('modelType.diffusion')}
+        name={t('modelType.diffusion', {count: 1})}
         query={{
           result: models,
           selector: (result) => result.diffusion,
@@ -107,7 +107,7 @@ export function ModelControl() {
       <QueryList
         id='upscaling'
         labelKey='model'
-        name={t('modelType.upscaling')}
+        name={t('modelType.upscaling', {count: 1})}
         query={{
           result: models,
           selector: (result) => result.upscaling,
@@ -122,7 +122,7 @@ export function ModelControl() {
       <QueryList
         id='correction'
         labelKey='model'
-        name={t('modelType.correction')}
+        name={t('modelType.correction', {count: 1})}
         query={{
           result: models,
           selector: (result) => result.correction,
diff --git a/gui/src/components/input/EditableList.tsx b/gui/src/components/input/EditableList.tsx
index 5c6cf4766..c327a07b3 100644
--- a/gui/src/components/input/EditableList.tsx
+++ b/gui/src/components/input/EditableList.tsx
@@ -1,6 +1,7 @@
 import { mustExist } from '@apextoaster/js-utils';
 import { Button, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 
 import { OnnxState, StateContext } from '../../state.js';
@@ -23,6 +24,7 @@ export interface EditableListProps<T> {
 export function EditableList<T>(props: EditableListProps<T>) {
   const { newItem, removeItem, renderItem, setItem, selector } = props;
 
+  const { t } = useTranslation();
   const state = mustExist(useContext(StateContext));
   const items = useStore(state, selector);
   const [nextLabel, setNextLabel] = useState('');
@@ -40,13 +42,13 @@ export function EditableList<T>(props: EditableListProps<T>) {
     )}
     <Stack direction='row' spacing={2}>
       <TextField
-        label='Label'
+        label={t('extras.label')}
         variant='outlined'
         value={nextLabel}
         onChange={(event) => setNextLabel(event.target.value)}
       />
       <TextField
-        label='Source'
+        label={t('extras.source')}
         variant='outlined'
         value={nextSource}
         onChange={(event) => setNextSource(event.target.value)}
@@ -55,7 +57,7 @@ export function EditableList<T>(props: EditableListProps<T>) {
         setItem(newItem(nextLabel, nextSource));
         setNextLabel('');
         setNextSource('');
-      }}>New</Button>
+      }}>{t('extras.add')}</Button>
     </Stack>
   </Stack>;
 }
diff --git a/gui/src/components/input/model/CorrectionModel.tsx b/gui/src/components/input/model/CorrectionModel.tsx
index 2d3b096ca..a1db14e69 100644
--- a/gui/src/components/input/model/CorrectionModel.tsx
+++ b/gui/src/components/input/model/CorrectionModel.tsx
@@ -1,5 +1,6 @@
 import { Button, MenuItem, Select, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { CorrectionArch, CorrectionModel, ModelFormat } from '../../../types.js';
 
@@ -13,9 +14,11 @@ export interface CorrectionModelInputProps {
 
 export function CorrectionModelInput(props: CorrectionModelInputProps) {
   const { key, model, onChange, onRemove } = props;
+  const { t } = useTranslation();
 
   return <Stack direction='row' spacing={2} key={key}>
     <TextField
+      label={t('extras.label')}
       value={model.label}
       onChange={(event) => {
         onChange({
@@ -25,6 +28,7 @@ export function CorrectionModelInput(props: CorrectionModelInputProps) {
       }}
     />
     <TextField
+      label={t('extras.source')}
       value={model.source}
       onChange={(event) => {
         onChange({
@@ -34,8 +38,8 @@ export function CorrectionModelInput(props: CorrectionModelInputProps) {
       }}
     />
     <Select
+      label={t('extras.format')}
       value={model.format}
-      label='Format'
       onChange={(selection) => {
         onChange({
           ...model,
@@ -47,8 +51,8 @@ export function CorrectionModelInput(props: CorrectionModelInputProps) {
       <MenuItem value='safetensors'>safetensors</MenuItem>
     </Select>
     <Select
+      label={t('extras.model')}
       value={model.model}
-      label='Type'
       onChange={(selection) => {
         onChange({
           ...model,
@@ -56,9 +60,9 @@ export function CorrectionModelInput(props: CorrectionModelInputProps) {
         });
       }}
     >
-      <MenuItem value='codeformer'>Codeformer</MenuItem>
-      <MenuItem value='gfpgan'>GFPGAN</MenuItem>
+      <MenuItem value='codeformer'>codeformer</MenuItem>
+      <MenuItem value='gfpgan'>gfpgan</MenuItem>
     </Select>
-    <Button onClick={() => onRemove(model)}>Remove</Button>
+    <Button onClick={() => onRemove(model)}>{t('extras.remove')}</Button>
   </Stack>;
 }
diff --git a/gui/src/components/input/model/DiffusionModel.tsx b/gui/src/components/input/model/DiffusionModel.tsx
index c755c2858..b7d7b98be 100644
--- a/gui/src/components/input/model/DiffusionModel.tsx
+++ b/gui/src/components/input/model/DiffusionModel.tsx
@@ -1,5 +1,6 @@
 import { Button, MenuItem, Select, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { DiffusionModel, ModelFormat } from '../../../types.js';
 
@@ -13,29 +14,42 @@ export interface DiffusionModelInputProps {
 
 export function DiffusionModelInput(props: DiffusionModelInputProps) {
   const { key, model, onChange, onRemove } = props;
+  const { t } = useTranslation();
 
   return <Stack direction='row' spacing={2} key={key}>
-    <TextField label='Label' value={model.label} onChange={(event) => {
-      onChange({
-        ...model,
-        label: event.target.value,
-      });
-    }} />
-    <TextField label='Source' value={model.source} onChange={(event) => {
-      onChange({
-        ...model,
-        source: event.target.value,
-      });
-    }} />
-    <Select value={model.format} label='Format' onChange={(selection) => {
-      onChange({
-        ...model,
-        format: selection.target.value as ModelFormat,
-      });
-    }}>
+    <TextField
+      label={t('extras.label')}
+      value={model.label}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          label: event.target.value,
+        });
+      }}
+    />
+    <TextField
+      label={t('extras.source')}
+      value={model.source}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          source: event.target.value,
+        });
+      }}
+    />
+    <Select
+      label={t('extras.format')}
+      value={model.format}
+      onChange={(selection) => {
+        onChange({
+          ...model,
+          format: selection.target.value as ModelFormat,
+        });
+      }}
+    >
       <MenuItem value='ckpt'>ckpt</MenuItem>
       <MenuItem value='safetensors'>safetensors</MenuItem>
     </Select>
-    <Button onClick={() => onRemove(model)}>Remove</Button>
+    <Button onClick={() => onRemove(model)}>{t('extras.remove')}</Button>
   </Stack>;
 }
diff --git a/gui/src/components/input/model/ExtraNetwork.tsx b/gui/src/components/input/model/ExtraNetwork.tsx
index 478ef5c50..2fcdef2b7 100644
--- a/gui/src/components/input/model/ExtraNetwork.tsx
+++ b/gui/src/components/input/model/ExtraNetwork.tsx
@@ -1,5 +1,6 @@
 import { Button, MenuItem, Select, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ExtraNetwork, ModelFormat, NetworkModel, NetworkType } from '../../../types.js';
 
@@ -13,10 +14,11 @@ export interface ExtraNetworkInputProps {
 
 export function ExtraNetworkInput(props: ExtraNetworkInputProps) {
   const { key, model, onChange, onRemove } = props;
+  const { t } = useTranslation();
 
   return <Stack direction='row' spacing={2} key={key}>
     <TextField
-      label='Label'
+      label={t('extras.label')}
       value={model.label}
       onChange={(event) => {
         onChange({
@@ -26,7 +28,7 @@ export function ExtraNetworkInput(props: ExtraNetworkInputProps) {
       }}
     />
     <TextField
-      label='Source'
+      label={t('extras.source')}
       value={model.source}
       onChange={(event) => {
         onChange({
@@ -36,7 +38,7 @@ export function ExtraNetworkInput(props: ExtraNetworkInputProps) {
       }}
     />
     <Select
-      label='Format'
+      label={t('extras.format')}
       value={model.format}
       onChange={(selection) => {
         onChange({
@@ -45,29 +47,37 @@ export function ExtraNetworkInput(props: ExtraNetworkInputProps) {
         });
       }}
     >
+      <MenuItem value='bin'>bin</MenuItem>
       <MenuItem value='ckpt'>ckpt</MenuItem>
       <MenuItem value='safetensors'>safetensors</MenuItem>
-      <MenuItem value='bin'>bin</MenuItem>
     </Select>
-    <Select value={model.type} label='Type' onChange={(selection) => {
-      onChange({
-        ...model,
-        type: selection.target.value as NetworkType,
-      });
-    }}>
-      <MenuItem value='inversion'>Textual Inversion</MenuItem>
-      <MenuItem value='lora'>LoRA or LyCORIS</MenuItem>
+    <Select
+      label={t('extras.type')}
+      value={model.type}
+      onChange={(selection) => {
+        onChange({
+          ...model,
+          type: selection.target.value as NetworkType,
+        });
+      }}
+    >
+      <MenuItem value='inversion'>{t('modelType.inversion')}</MenuItem>
+      <MenuItem value='lora'>{t('modelType.lora')}</MenuItem>
     </Select>
-    <Select value={model.model} label='Model' onChange={(selection) => {
-      onChange({
-        ...model,
-        model: selection.target.value as NetworkModel,
-      });
-    }}>
-      <MenuItem value='sd-scripts'>LoRA - sd-scripts</MenuItem>
-      <MenuItem value='concept'>TI - concept</MenuItem>
-      <MenuItem value='embeddings'>TI - embeddings</MenuItem>
+    <Select
+      label={t('extras.model')}
+      value={model.model}
+      onChange={(selection) => {
+        onChange({
+          ...model,
+          model: selection.target.value as NetworkModel,
+        });
+      }}
+    >
+      <MenuItem value='sd-scripts'>sd-scripts</MenuItem>
+      <MenuItem value='concept'>concept</MenuItem>
+      <MenuItem value='embeddings'>embeddings</MenuItem>
     </Select>
-    <Button onClick={() => onRemove(model)}>Remove</Button>
+    <Button onClick={() => onRemove(model)}>{t('extras.remove')}</Button>
   </Stack>;
 }
diff --git a/gui/src/components/input/model/ExtraSource.tsx b/gui/src/components/input/model/ExtraSource.tsx
index 753b559af..c20111234 100644
--- a/gui/src/components/input/model/ExtraSource.tsx
+++ b/gui/src/components/input/model/ExtraSource.tsx
@@ -1,5 +1,6 @@
 import { Button, MenuItem, Select, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { AnyFormat, ExtraSource } from '../../../types.js';
 
@@ -13,22 +14,31 @@ export interface ExtraSourceInputProps {
 
 export function ExtraSourceInput(props: ExtraSourceInputProps) {
   const { key, model, onChange, onRemove } = props;
+  const { t } = useTranslation();
 
   return <Stack direction='row' spacing={2} key={key}>
-    <TextField label='Name' value={model.name} onChange={(event) => {
-      onChange({
-        ...model,
-        name: event.target.value,
-      });
-    }} />
-    <TextField label='Source' value={model.source} onChange={(event) => {
-      onChange({
-        ...model,
-        source: event.target.value,
-      });
-    }} />
+    <TextField
+      label={t('extras.name')}
+      value={model.name}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          name: event.target.value,
+        });
+      }}
+    />
+    <TextField
+      label={t('extras.source')}
+      value={model.source}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          source: event.target.value,
+        });
+      }}
+    />
     <Select
-      label='Format'
+      label={t('extras.format')}
       value={model.format}
       onChange={(selection) => {
         onChange({
@@ -42,12 +52,16 @@ export function ExtraSourceInput(props: ExtraSourceInputProps) {
       <MenuItem value='json'>json</MenuItem>
       <MenuItem value='yaml'>yaml</MenuItem>
     </Select>
-    <TextField label='Folder' value={model.dest} onChange={(event) => {
-      onChange({
-        ...model,
-        dest: event.target.value,
-      });
-    }} />
-    <Button onClick={() => onRemove(model)}>Remove</Button>
+    <TextField
+      label={t('extras.dest')}
+      value={model.dest}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          dest: event.target.value,
+        });
+      }}
+    />
+    <Button onClick={() => onRemove(model)}>{t('extras.remove')}</Button>
   </Stack>;
 }
diff --git a/gui/src/components/input/model/UpscalingModel.tsx b/gui/src/components/input/model/UpscalingModel.tsx
index 57617474c..c315da914 100644
--- a/gui/src/components/input/model/UpscalingModel.tsx
+++ b/gui/src/components/input/model/UpscalingModel.tsx
@@ -1,5 +1,6 @@
 import { Button, MenuItem, Select, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ModelFormat, UpscalingArch, UpscalingModel } from '../../../types.js';
 import { NumericField } from '../NumericField.js';
@@ -14,41 +15,58 @@ export interface UpscalingModelInputProps {
 
 export function UpscalingModelInput(props: UpscalingModelInputProps) {
   const { key, model, onChange, onRemove } = props;
+  const { t } = useTranslation();
 
   return <Stack direction='row' spacing={2} key={key}>
-    <TextField value={model.label} label='Label' onChange={(event) => {
-      onChange({
-        ...model,
-        label: event.target.value,
-      });
-    }} />
-    <TextField value={model.source} label='Source' onChange={(event) => {
-      onChange({
-        ...model,
-        source: event.target.value,
-      });
-    }} />
-    <Select value={model.format} label='Format' onChange={(selection) => {
-      onChange({
-        ...model,
-        format: selection.target.value as ModelFormat,
-      });
-    }}>
+    <TextField
+      label={t('extras.label')}
+      value={model.label}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          label: event.target.value,
+        });
+      }}
+    />
+    <TextField
+      label={t('extras.source')}
+      value={model.source}
+      onChange={(event) => {
+        onChange({
+          ...model,
+          source: event.target.value,
+        });
+      }}
+    />
+    <Select
+      label={t('extras.format')}
+      value={model.format}
+      onChange={(selection) => {
+        onChange({
+          ...model,
+          format: selection.target.value as ModelFormat,
+        });
+      }}
+    >
       <MenuItem value='ckpt'>ckpt</MenuItem>
       <MenuItem value='safetensors'>safetensors</MenuItem>
     </Select>
-    <Select value={model.model} label='Type' onChange={(selection) => {
-      onChange({
-        ...model,
-        model: selection.target.value as UpscalingArch,
-      });
-    }}>
+    <Select
+      label={t('extras.model')}
+      value={model.model}
+      onChange={(selection) => {
+        onChange({
+          ...model,
+          model: selection.target.value as UpscalingArch,
+        });
+      }}
+    >
       <MenuItem value='bsrgan'>BSRGAN</MenuItem>
       <MenuItem value='resrgan'>Real ESRGAN</MenuItem>
       <MenuItem value='swinir'>SwinIR</MenuItem>
     </Select>
     <NumericField
-      label='Scale'
+      label={t('extras.scale')}
       min={1}
       max={4}
       step={1}
@@ -60,6 +78,6 @@ export function UpscalingModelInput(props: UpscalingModelInputProps) {
         });
       }}
     />
-    <Button onClick={() => onRemove(model)}>Remove</Button>
+    <Button onClick={() => onRemove(model)}>{t('extras.remove')}</Button>
   </Stack>;
 }
diff --git a/gui/src/components/tab/Models.tsx b/gui/src/components/tab/Models.tsx
index b4043719c..0ec2b52f7 100644
--- a/gui/src/components/tab/Models.tsx
+++ b/gui/src/components/tab/Models.tsx
@@ -3,11 +3,22 @@ import { Accordion, AccordionDetails, AccordionSummary, Alert, Button, CircularP
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 
 import { STALE_TIME } from '../../config.js';
 import { ClientContext, OnnxState, StateContext } from '../../state.js';
-import { CorrectionModel, DiffusionModel, ExtraNetwork, ExtraSource, ExtrasFile, NetworkModel, NetworkType, SafetensorFormat, UpscalingModel } from '../../types.js';
+import {
+  CorrectionModel,
+  DiffusionModel,
+  ExtraNetwork,
+  ExtrasFile,
+  ExtraSource,
+  NetworkModel,
+  NetworkType,
+  SafetensorFormat,
+  UpscalingModel,
+} from '../../types.js';
 import { EditableList } from '../input/EditableList';
 import { CorrectionModelInput } from '../input/model/CorrectionModel.js';
 import { DiffusionModelInput } from '../input/model/DiffusionModel.js';
@@ -99,6 +110,7 @@ export function Models() {
   const write = useMutation(writeExtras, {
     onSuccess: () => query.invalidateQueries([ 'extras' ]),
   });
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (result.status === 'success' && doesExist(result.data)) {
@@ -107,11 +119,15 @@ export function Models() {
   }, [result.status]);
 
   if (result.status === 'error') {
-    return <Alert severity='error'>Error</Alert>;
+    return <Stack spacing={2} direction='row' sx={{ alignItems: 'center' }}>
+      <Alert severity='error'>Error</Alert>
+    </Stack>;
   }
 
   if (result.status === 'loading') {
-    return <CircularProgress />;
+    return <Stack spacing={2} direction='row' sx={{ alignItems: 'center' }}>
+      <CircularProgress />
+    </Stack> ;
   }
 
   async function writeExtras() {
@@ -122,7 +138,7 @@ export function Models() {
   return <Stack spacing={2}>
     <Accordion>
       <AccordionSummary>
-        Diffusion Models
+        {t('modelType.diffusion', {count: 10})}
       </AccordionSummary>
       <AccordionDetails>
         <EditableList<DiffusionModel>
@@ -141,7 +157,7 @@ export function Models() {
     </Accordion>
     <Accordion>
       <AccordionSummary>
-        Correction Models
+        {t('modelType.correction', {count: 10})}
       </AccordionSummary>
       <AccordionDetails>
         <EditableList
@@ -160,7 +176,7 @@ export function Models() {
     </Accordion>
     <Accordion>
       <AccordionSummary>
-        Upscaling Models
+        {t('modelType.upscaling', {count: 10})}
       </AccordionSummary>
       <AccordionDetails>
         <EditableList
@@ -180,7 +196,7 @@ export function Models() {
     </Accordion>
     <Accordion>
       <AccordionSummary>
-        Extra Networks
+        {t('modelType.network', {count: 10})}
       </AccordionSummary>
       <AccordionDetails>
         <EditableList
@@ -201,7 +217,7 @@ export function Models() {
     </Accordion>
     <Accordion>
       <AccordionSummary>
-        Other Sources
+        {t('modelType.source', {count: 10})}
       </AccordionSummary>
       <AccordionDetails>
         <EditableList
@@ -218,6 +234,6 @@ export function Models() {
         />
       </AccordionDetails>
     </Accordion>
-    <Button color='warning' onClick={() => write.mutate()}>Save & Convert</Button>
+    <Button color='warning' onClick={() => write.mutate()}>{t('convert')}</Button>
   </Stack>;
 }
diff --git a/gui/src/strings/de.ts b/gui/src/strings/de.ts
index fffc7388b..334cac7fa 100644
--- a/gui/src/strings/de.ts
+++ b/gui/src/strings/de.ts
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /**
  * This is a machine translation and may have some mistakes.
  *
@@ -9,11 +10,24 @@ export const I18N_STRINGS_DE = {
       admin: {
         restart: '',
       },
+      convert: '',
       error: {
         inpaint: {
           support: '',
         },
       },
+      extras: {
+        add: '',
+        dest: '',
+        format: '',
+        label: '',
+        model: '',
+        name: '',
+        remove: '',
+        scale: '',
+        source: '',
+        type: '',
+      },
       generate: 'Erzeugen',
       highresMethod: {
         bilinear: '',
@@ -74,11 +88,18 @@ export const I18N_STRINGS_DE = {
       },
       modelType: {
         control: '',
-        correction: 'Korrekturmodelle',
-        diffusion: 'Diffusionsmodelle',
+        correction_one: 'Korrekturmodelle',
+        correction_other: '',
+        diffusion_one: 'Diffusionsmodelle',
+        diffusion_other: '',
         inversion: '',
         lora: '',
-        upscaling: 'Modelle vergrößern',
+        network_one: '',
+        network_other: '',
+        source_one: '',
+        source_other: '',
+        upscaling_one: 'Modelle vergrößern',
+        upscaling_other: '',
       },
       noiseSource: {
         'fill-edge': 'Kanten füllen',
diff --git a/gui/src/strings/en.ts b/gui/src/strings/en.ts
index 184d84039..4be723088 100644
--- a/gui/src/strings/en.ts
+++ b/gui/src/strings/en.ts
@@ -1,14 +1,28 @@
+/* eslint-disable camelcase */
 export const I18N_STRINGS_EN = {
   en: {
     translation: {
       admin: {
         restart: 'Restart Workers',
       },
+      convert: 'Save and Convert',
       error: {
         inpaint: {
           support: 'This diffusion model may not support inpainting.',
         },
       },
+      extras: {
+        add: 'Add',
+        dest: 'Folder',
+        format: 'Format',
+        label: 'Label',
+        model: 'Model',
+        name: 'Name',
+        remove: 'Remove',
+        scale: 'Scale',
+        source: 'Source',
+        type: 'Type',
+      },
       generate: 'Generate',
       highresMethod: {
         bilinear: 'Bilinear',
@@ -126,11 +140,18 @@ export const I18N_STRINGS_EN = {
       },
       modelType: {
         control: 'ControlNet',
-        correction: 'Correction Model',
-        diffusion: 'Diffusion Model',
+        correction_one: 'Correction Model',
+        correction_other: 'Correction Models',
+        diffusion_one: 'Diffusion Model',
+        diffusion_other: 'Diffusion Models',
         inversion: 'Textual Inversion',
         lora: 'LoRA',
-        upscaling: 'Upscaling Model',
+        network_one: 'Extra Network',
+        network_other: 'Extra Networks',
+        source_one: 'Other Source',
+        source_other: 'Other Sources',
+        upscaling_one: 'Upscaling Model',
+        upscaling_other: 'Upscaling Models',
       },
       noiseSource: {
         'fill-edge': 'Fill Edges',
diff --git a/gui/src/strings/es.ts b/gui/src/strings/es.ts
index 25c6e8bbe..a0ae683ab 100644
--- a/gui/src/strings/es.ts
+++ b/gui/src/strings/es.ts
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /**
  * This is a machine translation and may have some mistakes.
  *
@@ -9,11 +10,24 @@ export const I18N_STRINGS_ES = {
       admin: {
         restart: '',
       },
+      convert: '',
       error: {
         inpaint: {
           support: '',
         },
       },
+      extras: {
+        add: '',
+        dest: '',
+        format: '',
+        label: '',
+        model: '',
+        name: '',
+        remove: '',
+        scale: '',
+        source: '',
+        type: '',
+      },
       generate: 'Generar',
       history: {
         empty: 'Sin antecedentes recientes. Presiona generar para crear una nueva imagen.',
@@ -74,11 +88,18 @@ export const I18N_STRINGS_ES = {
       },
       modelType: {
         control: '',
-        correction: 'Modelo de corrección',
-        diffusion: 'Modelo de difusión',
+        correction_one: 'Modelo de corrección',
+        correction_other: '',
+        diffusion_one: 'Modelo de difusión',
+        diffusion_other: '',
         inversion: '',
         lora: '',
-        upscaling: 'Modelo de aumento',
+        network_one: '',
+        network_other: '',
+        source_one: '',
+        source_other: '',
+        upscaling_one: 'Modelo de aumento',
+        upscaling_other: '',
       },
       noiseSource: {
         'fill-edge': 'Rellena los bordes',
diff --git a/gui/src/strings/fr.ts b/gui/src/strings/fr.ts
index acfba2e6b..a1fb53b1f 100644
--- a/gui/src/strings/fr.ts
+++ b/gui/src/strings/fr.ts
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /**
  * This is a machine translation and may have some mistakes.
  *
@@ -9,11 +10,24 @@ export const I18N_STRINGS_FR = {
       admin: {
         restart: '',
       },
+      convert: '',
       error: {
         inpaint: {
           support: '',
         },
       },
+      extras: {
+        add: '',
+        dest: '',
+        format: '',
+        label: '',
+        model: '',
+        name: '',
+        remove: '',
+        scale: '',
+        source: '',
+        type: '',
+      },
       generate: 'générer',
       highresMethod: {
         bilinear: '',
@@ -74,11 +88,18 @@ export const I18N_STRINGS_FR = {
       },
       modelType: {
         control: '',
-        correction: 'modèle de correction',
-        diffusion: 'modèle de diffusion',
+        correction_one: 'modèle de correction',
+        correction_other: '',
+        diffusion_one: 'modèle de diffusion',
+        diffusion_other: '',
         inversion: '',
         lora: '',
-        upscaling: 'modèle de grossissement',
+        network_one: '',
+        network_other: '',
+        source_one: '',
+        source_other: '',
+        upscaling_one: 'modèle de grossissement',
+        upscaling_other: '',
       },
       noiseSource: {
         'fill-edge': '',