diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index b22a493868..4271a17df0 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -4,7 +4,7 @@ import { InvokeLogLevel } from 'app/logging/logger'; import { userInvoked } from 'app/store/actions'; import { nodeTemplatesBuilt } from 'features/nodes/store/nodesSlice'; import { t } from 'i18next'; -import { startCase } from 'lodash-es'; +import { startCase, upperFirst } from 'lodash-es'; import { LogLevelName } from 'roarr'; import { isAnySessionRejected, @@ -26,6 +26,7 @@ import { import { ProgressImage } from 'services/events/types'; import { makeToast } from '../util/makeToast'; import { LANGUAGES } from './constants'; +import { zPydanticValidationError } from './zod'; export type CancelStrategy = 'immediate' | 'scheduled'; @@ -361,9 +362,24 @@ export const systemSlice = createSlice({ state.progressImage = null; let errorDescription = undefined; + const duration = 5000; if (action.payload?.status === 422) { - errorDescription = 'Validation Error'; + const result = zPydanticValidationError.safeParse(action.payload); + if (result.success) { + result.data.error.detail.map((e) => { + state.toastQueue.push( + makeToast({ + title: upperFirst(e.msg), + status: 'error', + description: `Path: + ${e.loc.slice(3).join('.')}`, + duration, + }) + ); + }); + return; + } } else if (action.payload?.error) { errorDescription = action.payload?.error as string; } @@ -373,6 +389,7 @@ export const systemSlice = createSlice({ title: t('toast.serverError'), status: 'error', description: errorDescription, + duration, }) ); }); diff --git a/invokeai/frontend/web/src/features/system/store/zod.ts b/invokeai/frontend/web/src/features/system/store/zod.ts new file mode 100644 index 0000000000..3a3b950019 --- /dev/null +++ b/invokeai/frontend/web/src/features/system/store/zod.ts @@ -0,0 +1,14 @@ +import { z } from 'zod'; + +export const zPydanticValidationError = z.object({ + status: z.literal(422), + error: z.object({ + detail: z.array( + z.object({ + loc: z.array(z.string()), + msg: z.string(), + type: z.string(), + }) + ), + }), +});