feat(ui): improve error toast messages

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,
         })
       );
     });

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(),
+      })
+    ),
+  }),
+});