diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index f989a98b4e..db43fd2f71 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -57,7 +57,7 @@ "@dnd-kit/core": "^6.1.0", "@dnd-kit/utilities": "^3.2.2", "@fontsource-variable/inter": "^5.0.16", - "@invoke-ai/ui": "0.0.12", + "@invoke-ai/ui": "0.0.13", "@mantine/form": "6.0.21", "@nanostores/react": "^0.7.1", "@reduxjs/toolkit": "2.0.1", diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml index bdd7ab844c..958c3f6350 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -29,8 +29,8 @@ dependencies: specifier: ^5.0.16 version: 5.0.16 '@invoke-ai/ui': - specifier: 0.0.12 - version: 0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) + specifier: 0.0.13 + version: 0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) '@mantine/form': specifier: 6.0.21 version: 6.0.21(react@18.2.0) @@ -3759,8 +3759,8 @@ packages: '@swc/helpers': 0.5.3 dev: false - /@invoke-ai/ui@0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-G0iPzGx1Nu7mHOZtwUYtqNWAqo2KnYGvs883w4WJwUpoCEbnaZd9Pi876UvOh9aNyjO93t/5ctIffkcYlDKGNg==} + /@invoke-ai/ui@0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-X4Txij2dMnzPUXTPhorBHezByJQ/ceyHxCM+zZ0gpFsSyXUieOFWjaSu+dAVpghS9y0dxFQGayHvNyX6VsX/PA==} peerDependencies: '@fontsource-variable/inter': ^5.0.16 react: ^18.2.0 @@ -12063,7 +12063,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.23.8 react: 18.2.0 dev: false @@ -12158,7 +12158,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.23.8 '@types/react': 18.2.48 focus-lock: 1.0.0 prop-types: 15.8.1 diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts index 7b24220e98..2dd36690a0 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts @@ -46,14 +46,14 @@ export const addDynamicPromptsListener = () => { if (cachedPrompts) { dispatch(promptsChanged(cachedPrompts.prompts)); + dispatch(parsingErrorChanged(cachedPrompts.error)); return; } if (!getShouldProcessPrompt(state.generation.positivePrompt)) { - if (state.dynamicPrompts.isLoading) { - dispatch(isLoadingChanged(false)); - } dispatch(promptsChanged([state.generation.positivePrompt])); + dispatch(parsingErrorChanged(undefined)); + dispatch(isErrorChanged(false)); return; } @@ -78,7 +78,6 @@ export const addDynamicPromptsListener = () => { dispatch(promptsChanged(res.prompts)); dispatch(parsingErrorChanged(res.error)); dispatch(isErrorChanged(false)); - dispatch(isLoadingChanged(false)); } catch { dispatch(isErrorChanged(true)); dispatch(isLoadingChanged(false)); diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx index 4b5de0cb85..48cfd9a8d4 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx @@ -61,7 +61,12 @@ const ParamDynamicPromptsPreview = () => { } return ( - + {label} diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx index 7dceb6acfc..b590767868 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx @@ -13,7 +13,11 @@ const loadingStyles: SystemStyleObject = { export const ShowDynamicPromptsPreviewButton = memo(() => { const { t } = useTranslation(); const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading); + const isError = useAppSelector((s) => + Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError) + ); const { isOpen, onOpen } = useDynamicPromptsModal(); + return ( { icon={} onClick={onOpen} sx={isLoading ? loadingStyles : undefined} + colorScheme={isError && !isLoading ? 'error' : 'base'} /> ); diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts index 845f72306e..603faa5535 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts +++ b/invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts @@ -47,6 +47,7 @@ export const dynamicPromptsSlice = createSlice({ }, promptsChanged: (state, action: PayloadAction) => { state.prompts = action.payload; + state.isLoading = false; }, parsingErrorChanged: ( state, diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts index 56fa32fb67..1d2a5e715e 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts +++ b/invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts @@ -1,3 +1,3 @@ -const hasOpenCloseCurlyBracesRegex = /.*\{.*\}.*/; +const hasOpenCloseCurlyBracesRegex = /.*\{[\s\S]*\}.*/; export const getShouldProcessPrompt = (prompt: string): boolean => hasOpenCloseCurlyBracesRegex.test(prompt);