feat(gui): add warning when model does not support inpainting (#54)

gui/src/components/tab/Inpaint.tsx

@@ -1,5 +1,5 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
-import { Box, Button, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Stack } from '@mui/material';
+import { Alert, Box, Button, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -51,6 +51,14 @@ export function Inpaint() {
     }
   }
 
+  function preventInpaint(): boolean {
+    return doesExist(source) === false || doesExist(mask) === false;
+  }
+
+  function supportsInpaint(): boolean {
+    return diffusionModel.includes('inpaint');
+  }
+
   const state = mustExist(useContext(StateContext));
   const fillColor = useStore(state, (s) => s.inpaint.fillColor);
   const filter = useStore(state, (s) => s.inpaint.filter);
@@ -59,6 +67,7 @@ export function Inpaint() {
   const source = useStore(state, (s) => s.inpaint.source);
   const strength = useStore(state, (s) => s.inpaint.strength);
   const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
+  const diffusionModel = useStore(state, (s) => s.model.model);
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setInpaint = useStore(state, (s) => s.setInpaint);
@@ -71,8 +80,17 @@ export function Inpaint() {
     onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }),
   });
 
+  function renderBanner() {
+    if (supportsInpaint()) {
+      return undefined;
+    } else {
+      return <Alert severity="warning">{t('error.inpaint.support')}</Alert>;
+    }
+  }
+
   return <Box>
     <Stack spacing={2}>
+      {renderBanner()}
       <ImageInput
         filter={IMAGE_FILTER}
         image={source}
@@ -191,9 +209,10 @@ export function Inpaint() {
       <OutpaintControl />
       <UpscaleControl />
       <Button
-        disabled={doesExist(source) === false || doesExist(mask) === false}
+        disabled={preventInpaint()}
         variant='contained'
         onClick={() => upload.mutate()}
+        color={supportsInpaint() ? undefined : 'warning'}
       >{t('generate')}</Button>
     </Stack>
   </Box>;

gui/src/strings/de.ts

@@ -6,6 +6,11 @@
 export const I18N_STRINGS_DE = {
   de: {
     translation: {
+      error: {
+        inpaint: {
+          support: '',
+        },
+      },
       generate: 'Erzeugen',
       history: {
         empty: 'Keine neuere Geschichte. Drücken Sie Generieren, um ein Bild zu erstellen.',

gui/src/strings/en.ts

@@ -1,6 +1,11 @@
 export const I18N_STRINGS_EN = {
   en: {
     translation: {
+      error: {
+        inpaint: {
+          support: 'This diffusion model may not support inpainting.',
+        },
+      },
       generate: 'Generate',
       history: {
         empty: 'No recent history. Press Generate to create an image.',

gui/src/strings/es.ts

@@ -6,6 +6,11 @@
 export const I18N_STRINGS_ES = {
   es: {
     translation: {
+      error: {
+        inpaint: {
+          support: '',
+        },
+      },
       generate: 'Generar',
       history: {
         empty: 'Sin antecedentes recientes. Presiona generar para crear una nueva imagen.',

gui/src/strings/fr.ts

@@ -6,6 +6,11 @@
 export const I18N_STRINGS_FR = {
   fr: {
     translation: {
+      error: {
+        inpaint: {
+          support: '',
+        },
+      },
       generate: 'générer',
       history: {
         empty: 'pas d\'histoire récente. appuyez sur générer pour créer une image.',