feat(gui): translate most of the client

ssube · Mar 2, 2023 · 3760093 · 3760093
1 parent 5bfaddd
commit 3760093
Show file tree

Hide file tree

Showing 27 changed files with 843 additions and 219 deletions.
diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx
@@ -9,7 +9,6 @@ import { useStore } from 'zustand';
 
 import { ImageResponse } from '../client.js';
 import { BLEND_SOURCES, ConfigContext, StateContext } from '../state.js';
-import { MODEL_LABELS, SCHEDULER_LABELS } from '../strings.js';
 import { range, visibleIndex } from '../utils.js';
 
 export interface ImageCardProps {
@@ -99,8 +98,12 @@ export function ImageCard(props: ImageCardProps) {
   const [index, setIndex] = useState(0);
   const { t } = useTranslation();
 
-  const model = mustDefault(MODEL_LABELS[params.model], params.model);
-  const scheduler = mustDefault(SCHEDULER_LABELS[params.scheduler], params.scheduler);
+  function getLabel(key: string, name: string) {
+    return mustDefault(t(`${key}.${name}`), name);
+  }
+
+  const model = getLabel('model', params.model);
+  const scheduler = getLabel('scheduler', params.scheduler);
 
   return <Card sx={{ maxWidth: config.params.width.default }} elevation={2}>
     <CardMedia sx={{ height: config.params.height.default }}
@@ -138,11 +141,11 @@ export function ImageCard(props: ImageCardProps) {
             </Tooltip>
           </GridItem>
           <GridItem xs={4}>Model: {model}</GridItem>
-          <GridItem xs={4}>Scheduler: {scheduler}</GridItem>
-          <GridItem xs={4}>Seed: {params.seed}</GridItem>
-          <GridItem xs={4}>CFG: {params.cfg}</GridItem>
-          <GridItem xs={4}>Steps: {params.steps}</GridItem>
-          <GridItem xs={4}>Size: {size.width}x{size.height}</GridItem>
+          <GridItem xs={4}>{t('parameter.scheduler')}: {scheduler}</GridItem>
+          <GridItem xs={4}>{t('parameter.seed')}: {params.seed}</GridItem>
+          <GridItem xs={4}>{t('parameter.cfg')}: {params.cfg}</GridItem>
+          <GridItem xs={4}>{t('parameter.steps')}: {params.steps}</GridItem>
+          <GridItem xs={4}>{t('parameter.size')}: {size.width}x{size.height}</GridItem>
           <GridItem xs={12}>
             <Box textAlign='left'>{params.prompt}</Box>
           </GridItem>

diff --git a/gui/src/components/Logo.tsx b/gui/src/components/Logo.tsx
@@ -0,0 +1,8 @@
+import { Link, Typography } from '@mui/material';
+import * as React from 'react';
+
+export function Logo() {
+  return <Typography variant='h3' gutterBottom>
+    <Link href='https://github.com/ssube/onnx-web' target='_blank' underline='hover'>ONNX Web</Link>
+  </Typography>;
+}
diff --git a/gui/src/components/OnnxError.tsx b/gui/src/components/OnnxError.tsx
@@ -1,7 +1,9 @@
-import { Box, Button, Container, Link, Stack, Typography } from '@mui/material';
+import { Box, Button, Container, Stack, Typography } from '@mui/material';
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { STATE_KEY } from '../state';
+
+import { STATE_KEY } from '../state.js';
+import { Logo } from './Logo.js';
 
 export interface OnnxErrorProps {
   children?: ReactNode;
@@ -19,9 +21,7 @@ export function OnnxError(props: OnnxErrorProps) {
   return (
     <Container>
       <Box sx={{ my: 4 }}>
-        <Typography variant='h3' gutterBottom>
-          <Link href='https://github.com/ssube/onnx-web' target='_blank' underline='hover'>ONNX Web</Link>
-        </Typography>
+        <Logo />
       </Box>
       <Box sx={{ my: 4 }}>
         <Stack spacing={2}>

diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
@@ -6,6 +6,7 @@ import { useHash } from 'react-use/lib/useHash';
 
 import { ModelControl } from './control/ModelControl.js';
 import { ImageHistory } from './ImageHistory.js';
+import { Logo } from './Logo.js';
 import { Blend } from './tab/Blend.js';
 import { Img2Img } from './tab/Img2Img.js';
 import { Inpaint } from './tab/Inpaint.js';
@@ -41,9 +42,7 @@ export function OnnxWeb() {
   return (
     <Container>
       <Box sx={{ my: 4 }}>
-        <Typography variant='h3' gutterBottom>
-          <Link href='https://github.com/ssube/onnx-web' target='_blank' underline='hover'>ONNX Web</Link>
-        </Typography>
+        <Logo />
       </Box>
       <Box sx={{ mx: 4, my: 4 }}>
         <ModelControl />

diff --git a/gui/src/components/control/ImageControl.tsx b/gui/src/components/control/ImageControl.tsx
@@ -3,13 +3,13 @@ import { Casino } from '@mui/icons-material';
 import { Button, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
 import { BaseImgParams } from '../../client.js';
 import { STALE_TIME } from '../../config.js';
 import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state.js';
-import { SCHEDULER_LABELS } from '../../strings.js';
 import { NumericField } from '../input/NumericField.js';
 import { PromptInput } from '../input/PromptInput.js';
 import { QueryList } from '../input/QueryList.js';
@@ -27,6 +27,7 @@ export function ImageControl(props: ImageControlProps) {
   const { params } = mustExist(useContext(ConfigContext));
   const state = mustExist(useContext(StateContext));
   const controlState = useStore(state, props.selector);
+  const { t } = useTranslation();
 
   const client = mustExist(useContext(ClientContext));
   const schedulers = useQuery('schedulers', async () => client.schedulers(), {
@@ -37,8 +38,8 @@ export function ImageControl(props: ImageControlProps) {
     <Stack direction='row' spacing={4}>
       <QueryList
         id='schedulers'
-        labels={SCHEDULER_LABELS}
-        name='Scheduler'
+        labelKey='scheduler'
+        name={t('parameter.scheduler')}
         query={{
           result: schedulers,
         }}
@@ -54,7 +55,7 @@ export function ImageControl(props: ImageControlProps) {
       />
       <NumericField
         decimal
-        label='Eta'
+        label={t('parameter.eta')}
         min={params.eta.min}
         max={params.eta.max}
         step={params.eta.step}
@@ -69,7 +70,7 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
       <NumericField
-        label='Batch Size'
+        label={t('parameter.batch')}
         min={params.batch.min}
         max={params.batch.max}
         step={params.batch.step}
@@ -87,7 +88,7 @@ export function ImageControl(props: ImageControlProps) {
     <Stack direction='row' spacing={4}>
       <NumericField
         decimal
-        label='CFG'
+        label={t('parameter.cfg')}
         min={params.cfg.min}
         max={params.cfg.max}
         step={params.cfg.step}
@@ -102,7 +103,7 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
       <NumericField
-        label='Steps'
+        label={t('parameter.steps')}
         min={params.steps.min}
         max={params.steps.max}
         step={params.steps.step}
@@ -117,7 +118,7 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
       <NumericField
-        label='Seed'
+        label={t('parameter.seed')}
         min={params.seed.min}
         max={params.seed.max}
         step={params.seed.step}
@@ -144,7 +145,7 @@ export function ImageControl(props: ImageControlProps) {
           }
         }}
       >
-        New Seed
+        {t('parameter.newSeed')}
       </Button>
     </Stack>
     <PromptInput

diff --git a/gui/src/components/control/ModelControl.tsx b/gui/src/components/control/ModelControl.tsx
@@ -2,12 +2,12 @@ import { mustExist } from '@apextoaster/js-utils';
 import { Checkbox, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
 import { STALE_TIME } from '../../config.js';
 import { ClientContext, StateContext } from '../../state.js';
-import { INVERSION_LABELS, MODEL_LABELS, PLATFORM_LABELS } from '../../strings.js';
 import { QueryList } from '../input/QueryList.js';
 
 export function ModelControl() {
@@ -16,6 +16,7 @@ export function ModelControl() {
   const params = useStore(state, (s) => s.model);
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setModel = useStore(state, (s) => s.setModel);
+  const { t } = useTranslation();
 
   const models = useQuery('models', async () => client.models(), {
     staleTime: STALE_TIME,
@@ -27,8 +28,8 @@ export function ModelControl() {
   return <Stack direction='row' spacing={2}>
     <QueryList
       id='platforms'
-      labels={PLATFORM_LABELS}
-      name='Platform'
+      labelKey='platform'
+      name={t('parameter.platform')}
       query={{
         result: platforms,
       }}
@@ -41,8 +42,8 @@ export function ModelControl() {
     />
     <QueryList
       id='diffusion'
-      labels={MODEL_LABELS}
-      name='Diffusion Model'
+      labelKey='model'
+      name={t('modelType.diffusion')}
       query={{
         result: models,
         selector: (result) => result.diffusion,
@@ -56,8 +57,8 @@ export function ModelControl() {
     />
     <QueryList
       id='inversion'
-      labels={INVERSION_LABELS}
-      name='Textual Inversion'
+      labelKey='model'
+      name={t('modelType.inversion')}
       query={{
         result: models,
         selector: (result) => result.inversion,
@@ -72,8 +73,8 @@ export function ModelControl() {
     />
     <QueryList
       id='upscaling'
-      labels={MODEL_LABELS}
-      name='Upscaling Model'
+      labelKey='model'
+      name={t('modelType.upscaling')}
       query={{
         result: models,
         selector: (result) => result.upscaling,
@@ -87,8 +88,8 @@ export function ModelControl() {
     />
     <QueryList
       id='correction'
-      labels={MODEL_LABELS}
-      name='Correction Model'
+      labelKey='model'
+      name={t('modelType.correction')}
       query={{
         result: models,
         selector: (result) => result.correction,
@@ -101,7 +102,7 @@ export function ModelControl() {
       }}
     />
     <FormControlLabel
-      label='Long Prompt Weighting'
+      label={t('parameter.lpw')}
       control={<Checkbox
         checked={params.lpw}
         value='check'

diff --git a/gui/src/components/control/OutpaintControl.tsx b/gui/src/components/control/OutpaintControl.tsx
@@ -2,6 +2,7 @@ import { mustExist } from '@apextoaster/js-utils';
 import { Checkbox, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 
 import { ConfigContext, StateContext } from '../../state.js';
@@ -13,22 +14,23 @@ export function OutpaintControl() {
   const outpaint = useStore(state, (s) => s.outpaint);
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setOutpaint = useStore(state, (s) => s.setOutpaint);
+  const { t } = useTranslation();
 
   return <Stack direction='row' spacing={4}>
     <FormControlLabel
-      label='Outpaint'
+      label={t('parameter.outpaint.label')}
       control={<Checkbox
         checked={outpaint.enabled}
         value='check'
-        onChange={(event) => {
+        onChange={(_event) => {
           setOutpaint({
             enabled: outpaint.enabled === false,
           });
         }}
       />}
     />
     <NumericField
-      label='Left'
+      label={t('parameter.outpaint.left')}
       disabled={outpaint.enabled === false}
       min={0}
       max={params.width.max}
@@ -41,7 +43,7 @@ export function OutpaintControl() {
       }}
     />
     <NumericField
-      label='Right'
+      label={t('parameter.outpaint.right')}
       disabled={outpaint.enabled === false}
       min={0}
       max={params.width.max}
@@ -54,7 +56,7 @@ export function OutpaintControl() {
       }}
     />
     <NumericField
-      label='Top'
+      label={t('parameter.outpaint.top')}
       disabled={outpaint.enabled === false}
       min={0}
       max={params.height.max}
@@ -67,7 +69,7 @@ export function OutpaintControl() {
       }}
     />
     <NumericField
-      label='Bottom'
+      label={t('parameter.outpaint.bottom')}
       disabled={outpaint.enabled === false}
       min={0}
       max={params.height.max}