feat(gui): add warning when model does not support inpainting (#54)
This commit is contained in:
parent
468870e2e7
commit
643f7bbd01
|
@ -1,5 +1,5 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
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 * as React from 'react';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
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 state = mustExist(useContext(StateContext));
|
||||||
const fillColor = useStore(state, (s) => s.inpaint.fillColor);
|
const fillColor = useStore(state, (s) => s.inpaint.fillColor);
|
||||||
const filter = useStore(state, (s) => s.inpaint.filter);
|
const filter = useStore(state, (s) => s.inpaint.filter);
|
||||||
|
@ -59,6 +67,7 @@ export function Inpaint() {
|
||||||
const source = useStore(state, (s) => s.inpaint.source);
|
const source = useStore(state, (s) => s.inpaint.source);
|
||||||
const strength = useStore(state, (s) => s.inpaint.strength);
|
const strength = useStore(state, (s) => s.inpaint.strength);
|
||||||
const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
|
const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
|
||||||
|
const diffusionModel = useStore(state, (s) => s.model.model);
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||||
const setInpaint = useStore(state, (s) => s.setInpaint);
|
const setInpaint = useStore(state, (s) => s.setInpaint);
|
||||||
|
@ -71,8 +80,17 @@ export function Inpaint() {
|
||||||
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }),
|
onSuccess: () => query.invalidateQueries({ queryKey: 'ready' }),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function renderBanner() {
|
||||||
|
if (supportsInpaint()) {
|
||||||
|
return undefined;
|
||||||
|
} else {
|
||||||
|
return <Alert severity="warning">{t('error.inpaint.support')}</Alert>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return <Box>
|
return <Box>
|
||||||
<Stack spacing={2}>
|
<Stack spacing={2}>
|
||||||
|
{renderBanner()}
|
||||||
<ImageInput
|
<ImageInput
|
||||||
filter={IMAGE_FILTER}
|
filter={IMAGE_FILTER}
|
||||||
image={source}
|
image={source}
|
||||||
|
@ -191,9 +209,10 @@ export function Inpaint() {
|
||||||
<OutpaintControl />
|
<OutpaintControl />
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button
|
<Button
|
||||||
disabled={doesExist(source) === false || doesExist(mask) === false}
|
disabled={preventInpaint()}
|
||||||
variant='contained'
|
variant='contained'
|
||||||
onClick={() => upload.mutate()}
|
onClick={() => upload.mutate()}
|
||||||
|
color={supportsInpaint() ? undefined : 'warning'}
|
||||||
>{t('generate')}</Button>
|
>{t('generate')}</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
|
|
|
@ -6,6 +6,11 @@
|
||||||
export const I18N_STRINGS_DE = {
|
export const I18N_STRINGS_DE = {
|
||||||
de: {
|
de: {
|
||||||
translation: {
|
translation: {
|
||||||
|
error: {
|
||||||
|
inpaint: {
|
||||||
|
support: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
generate: 'Erzeugen',
|
generate: 'Erzeugen',
|
||||||
history: {
|
history: {
|
||||||
empty: 'Keine neuere Geschichte. Drücken Sie Generieren, um ein Bild zu erstellen.',
|
empty: 'Keine neuere Geschichte. Drücken Sie Generieren, um ein Bild zu erstellen.',
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
export const I18N_STRINGS_EN = {
|
export const I18N_STRINGS_EN = {
|
||||||
en: {
|
en: {
|
||||||
translation: {
|
translation: {
|
||||||
|
error: {
|
||||||
|
inpaint: {
|
||||||
|
support: 'This diffusion model may not support inpainting.',
|
||||||
|
},
|
||||||
|
},
|
||||||
generate: 'Generate',
|
generate: 'Generate',
|
||||||
history: {
|
history: {
|
||||||
empty: 'No recent history. Press Generate to create an image.',
|
empty: 'No recent history. Press Generate to create an image.',
|
||||||
|
|
|
@ -6,6 +6,11 @@
|
||||||
export const I18N_STRINGS_ES = {
|
export const I18N_STRINGS_ES = {
|
||||||
es: {
|
es: {
|
||||||
translation: {
|
translation: {
|
||||||
|
error: {
|
||||||
|
inpaint: {
|
||||||
|
support: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
generate: 'Generar',
|
generate: 'Generar',
|
||||||
history: {
|
history: {
|
||||||
empty: 'Sin antecedentes recientes. Presiona generar para crear una nueva imagen.',
|
empty: 'Sin antecedentes recientes. Presiona generar para crear una nueva imagen.',
|
||||||
|
|
|
@ -6,6 +6,11 @@
|
||||||
export const I18N_STRINGS_FR = {
|
export const I18N_STRINGS_FR = {
|
||||||
fr: {
|
fr: {
|
||||||
translation: {
|
translation: {
|
||||||
|
error: {
|
||||||
|
inpaint: {
|
||||||
|
support: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
generate: 'générer',
|
generate: 'générer',
|
||||||
history: {
|
history: {
|
||||||
empty: 'pas d\'histoire récente. appuyez sur générer pour créer une image.',
|
empty: 'pas d\'histoire récente. appuyez sur générer pour créer une image.',
|
||||||
|
|
Loading…
Reference in New Issue