start localizing extras tab

ssube · May 9, 2023 · 00e3fe5 · 00e3fe5
1 parent f1856cb
commit 00e3fe5
Show file tree

Hide file tree

Showing 12 changed files with 281 additions and 119 deletions.
diff --git 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
@@ -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
@@ -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,18 +51,18 @@ 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,
           model: selection.target.value as CorrectionArch,
         });
       }}
     >
-      <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
@@ -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
@@ -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
@@ -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>;
 }