From be72765d02e51ddab6caaa8cce02db74be121543 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 20 Jan 2024 20:03:12 +1100 Subject: [PATCH] fix(ui): bump @invoke-ai/ui, fix TS issues --- invokeai/frontend/web/package.json | 6 +- invokeai/frontend/web/pnpm-lock.yaml | 102 +++++++++--------- .../InformationalPopover.tsx} | 75 +++++++------ .../constants.ts | 0 .../InvAutosizeTextarea.tsx | 40 ------- .../InvTextarea.stories.tsx | 21 ---- .../components/InvAutosizeTextarea/types.ts | 7 -- .../ParamControlAdapterControlMode.tsx | 7 +- .../ParamControlAdapterResizeMode.tsx | 7 +- .../parameters/ParamControlAdapterWeight.tsx | 7 +- .../components/DynamicPromptsPreviewModal.tsx | 2 +- .../ParamDynamicPromptsMaxPrompts.tsx | 11 +- .../components/ParamDynamicPromptsPreview.tsx | 50 +++++---- .../ParamDynamicPromptsSeedBehaviour.tsx | 13 ++- .../AddModelsPanel/AdvancedAddCheckpoint.tsx | 17 +-- .../AddModelsPanel/AdvancedAddDiffusers.tsx | 27 +++-- .../subpanels/MergeModelsPanel.tsx | 6 +- .../ModelManagerPanel/CheckpointModelEdit.tsx | 19 ++-- .../ModelManagerPanel/DiffusersModelEdit.tsx | 17 +-- .../ModelManagerPanel/LoRAModelEdit.tsx | 17 +-- .../TopRightPanel/WorkflowEditorSettings.tsx | 20 +++- .../Advanced/ParamCFGRescaleMultiplier.tsx | 7 +- .../components/Advanced/ParamClipSkip.tsx | 7 +- .../ParamCanvasCoherenceMode.tsx | 7 +- .../ParamCanvasCoherenceSteps.tsx | 7 +- .../ParamCanvasCoherenceStrength.tsx | 7 +- .../MaskAdjustment/ParamMaskBlur.tsx | 7 +- .../MaskAdjustment/ParamMaskBlurMethod.tsx | 7 +- .../InfillAndScaling/ParamInfillMethod.tsx | 7 +- .../ParamScaleBeforeProcessing.tsx | 7 +- .../components/Core/ParamCFGScale.tsx | 7 +- .../components/Core/ParamScheduler.tsx | 7 +- .../parameters/components/Core/ParamSteps.tsx | 7 +- .../ImageToImage/ImageToImageStrength.tsx | 7 +- .../components/Seed/ParamSeedNumberInput.tsx | 7 +- .../VAEModel/ParamVAEModelSelect.tsx | 11 +- .../components/VAEModel/ParamVAEPrecision.tsx | 7 +- .../components/QueueIterationsNumberInput.tsx | 6 +- .../SettingsModal/SettingsModal.tsx | 10 +- .../components/WorkflowLibraryPagination.tsx | 2 +- 40 files changed, 313 insertions(+), 292 deletions(-) rename invokeai/frontend/web/src/common/components/{IAIInformationalPopover/IAIInformationalPopover.tsx => InformationalPopover/InformationalPopover.tsx} (70%) rename invokeai/frontend/web/src/common/components/{IAIInformationalPopover => InformationalPopover}/constants.ts (100%) delete mode 100644 invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx delete mode 100644 invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvTextarea.stories.tsx delete mode 100644 invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index 0def97ea68..1d90180ef5 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -32,8 +32,8 @@ "fix": "eslint --fix . && prettier --log-level warn --write .", "preinstall": "npx only-allow pnpm", "postinstall": "pnpm run theme", - "theme": "chakra-cli tokens --strict-component-types --strict-token-types node_modules/@invoke-ai/ui", - "theme:watch": "chakra-cli tokens --strict-component-types --strict-token-types node_modules/@invoke-ai/ui --watch", + "theme": "chakra-cli tokens node_modules/@invoke-ai/ui", + "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui --watch", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "unimported": "npx unimported" @@ -66,7 +66,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource-variable/inter": "^5.0.16", - "@invoke-ai/ui": "file:/home/bat/Documents/Code/ui", + "@invoke-ai/ui": "^0.0.8", "@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 bb18789305..6e84da6b86 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -53,8 +53,8 @@ dependencies: specifier: ^5.0.16 version: 5.0.16 '@invoke-ai/ui': - specifier: file:/home/bat/Documents/Code/ui - version: file:../../../../ui(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0) + specifier: ^0.0.8 + version: 0.0.8(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0) '@mantine/form': specifier: 6.0.21 version: 6.0.21(react@18.2.0) @@ -3688,6 +3688,54 @@ packages: resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==} dev: true + /@invoke-ai/ui@0.0.8(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0): + resolution: {integrity: sha512-FjW9rV2Bh1h+EDU5eMQH+oR4vpA77GBrAOdbuIezeDSVcmACU5tuJXIPxw121ZAsH2ioyhgGPMvfAsF1HkSigA==} + peerDependencies: + '@chakra-ui/anatomy': ^2.2.2 + '@chakra-ui/icons': ^2.1.1 + '@chakra-ui/layout': ^2.3.1 + '@chakra-ui/portal': ^2.1.0 + '@chakra-ui/react': ^2.8.2 + '@chakra-ui/styled-system': ^2.9.2 + '@chakra-ui/theme-tools': ^2.1.2 + '@emotion/react': ^11.11.3 + '@emotion/styled': ^11.11.0 + '@fontsource-variable/inter': ^5.0.16 + '@nanostores/react': ^0.7.1 + chakra-react-select: ^4.7.6 + framer-motion: ^10.18.0 + lodash-es: ^4.17.21 + nanostores: ^0.9.5 + overlayscrollbars: ^2.4.6 + overlayscrollbars-react: ^0.5.3 + react: ^18.2.0 + react-dom: ^18.2.0 + react-i18next: ^14.0.0 + react-select: ^5.8.0 + dependencies: + '@chakra-ui/anatomy': 2.2.2 + '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0) + '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0) + '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0) + '@chakra-ui/react': 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0) + '@chakra-ui/styled-system': 2.9.2 + '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2) + '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.48)(react@18.2.0) + '@fontsource-variable/inter': 5.0.16 + '@nanostores/react': 0.7.1(nanostores@0.9.5)(react@18.2.0) + chakra-react-select: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@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)(@emotion/react@11.11.3)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) + framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) + lodash-es: 4.17.21 + nanostores: 0.9.5 + overlayscrollbars: 2.4.6 + overlayscrollbars-react: 0.5.3(overlayscrollbars@2.4.6)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) + react-select: 5.8.0(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) + dev: false + /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -13745,53 +13793,3 @@ packages: react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) dev: false - - file:../../../../ui(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0): - resolution: {directory: ../../../../ui, type: directory} - id: file:../../../../ui - name: '@invoke-ai/ui' - peerDependencies: - '@chakra-ui/anatomy': ^2.2.2 - '@chakra-ui/icons': ^2.1.1 - '@chakra-ui/layout': ^2.3.1 - '@chakra-ui/portal': ^2.1.0 - '@chakra-ui/react': ^2.8.2 - '@chakra-ui/styled-system': ^2.9.2 - '@chakra-ui/theme-tools': ^2.1.2 - '@emotion/react': ^11.11.3 - '@emotion/styled': ^11.11.0 - '@fontsource-variable/inter': ^5.0.16 - '@nanostores/react': ^0.7.1 - chakra-react-select: ^4.7.6 - framer-motion: ^10.18.0 - lodash-es: ^4.17.21 - nanostores: ^0.9.5 - overlayscrollbars: ^2.4.6 - overlayscrollbars-react: ^0.5.3 - react: ^18.2.0 - react-dom: ^18.2.0 - react-i18next: ^14.0.0 - react-select: ^5.8.0 - dependencies: - '@chakra-ui/anatomy': 2.2.2 - '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0) - '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0) - '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0) - '@chakra-ui/react': 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0) - '@chakra-ui/styled-system': 2.9.2 - '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2) - '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0) - '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.48)(react@18.2.0) - '@fontsource-variable/inter': 5.0.16 - '@nanostores/react': 0.7.1(nanostores@0.9.5)(react@18.2.0) - chakra-react-select: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@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)(@emotion/react@11.11.3)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) - lodash-es: 4.17.21 - nanostores: 0.9.5 - overlayscrollbars: 2.4.6 - overlayscrollbars-react: 0.5.3(overlayscrollbars@2.4.6)(react@18.2.0) - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) - react-select: 5.8.0(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - dev: false diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx similarity index 70% rename from invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx rename to invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx index 8248324a26..cd2b320155 100644 --- a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx @@ -28,51 +28,48 @@ type Props = { children: ReactElement; }; -const IAIInformationalPopover = ({ - feature, - children, - inPortal = true, - ...rest -}: Props) => { - const shouldEnableInformationalPopovers = useAppSelector( - (s) => s.system.shouldEnableInformationalPopovers - ); +export const InformationalPopover = memo( + ({ feature, children, inPortal = true, ...rest }: Props) => { + const shouldEnableInformationalPopovers = useAppSelector( + (s) => s.system.shouldEnableInformationalPopovers + ); - const data = useMemo(() => POPOVER_DATA[feature], [feature]); + const data = useMemo(() => POPOVER_DATA[feature], [feature]); - const popoverProps = useMemo( - () => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), - [data, rest] - ); + const popoverProps = useMemo( + () => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), + [data, rest] + ); - if (!shouldEnableInformationalPopovers) { - return children; - } + if (!shouldEnableInformationalPopovers) { + return children; + } - return ( - - {children} - {inPortal ? ( - + return ( + + {children} + {inPortal ? ( + + + + ) : ( - - ) : ( - - )} - - ); -}; + )} + + ); + } +); -export default memo(IAIInformationalPopover); +InformationalPopover.displayName = 'InformationalPopover'; type ContentProps = { data?: PopoverData; diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts similarity index 100% rename from invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts rename to invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx deleted file mode 100644 index b4c7e1ef5a..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Box, forwardRef, Textarea as ChakraTextarea } from '@invoke-ai/ui'; -import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers'; -import { stopPastePropagation } from 'common/util/stopPastePropagation'; -import type { KeyboardEvent } from 'react'; -import { memo, useCallback } from 'react'; -import ResizeTextarea from 'react-textarea-autosize'; - -import type { InvAutosizeTextareaProps } from './types'; - -export const InvAutosizeTextarea = memo( - forwardRef( - (props: InvAutosizeTextareaProps, ref) => { - const { setShift } = useGlobalModifiersSetters(); - const onKeyUpDown = useCallback( - (e: KeyboardEvent) => { - setShift(e.shiftKey); - }, - [setShift] - ); - return ( - - - - ); - } - ) -); - -InvAutosizeTextarea.displayName = 'InvAutosizeTextarea'; diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvTextarea.stories.tsx b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvTextarea.stories.tsx deleted file mode 100644 index 3a7bd15d8e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvTextarea.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { InvAutosizeTextarea } from './InvAutosizeTextarea'; -import type { InvAutosizeTextareaProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvAutosizeTextarea', - tags: ['autodocs'], - component: InvAutosizeTextarea, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvAutosizeTextareaProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts deleted file mode 100644 index 350428eaf7..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { TextareaProps as ChakraTextareaProps } from '@invoke-ai/ui'; -import type { TextareaAutosizeProps } from 'react-textarea-autosize'; - -export type InvAutosizeTextareaProps = Omit< - ChakraTextareaProps & TextareaAutosizeProps, - 'resize' ->; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx index 9819697990..1cee707bb6 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx @@ -1,6 +1,7 @@ import type { ComboboxOnChange } from '@invoke-ai/ui'; import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; +import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { useControlAdapterControlMode } from 'features/controlAdapters/hooks/useControlAdapterControlMode'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { controlAdapterControlModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice'; @@ -53,8 +54,10 @@ const ParamControlAdapterControlMode = ({ id }: Props) => { } return ( - - {t('controlnet.controlMode')} + + + {t('controlnet.controlMode')} + { } return ( - - {t('controlnet.resizeMode')} + + + {t('controlnet.resizeMode')} + { } return ( - - {t('controlnet.weight')} + + + {t('controlnet.weight')} + { {t('dynamicPrompts.dynamicPrompts')} - + diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx index e6f5616f13..cd0daaf22a 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx @@ -5,6 +5,7 @@ import { FormLabel, } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -38,12 +39,10 @@ const ParamDynamicPromptsMaxPrompts = () => { ); return ( - - {t('dynamicPrompts.maxPrompts')} + + + {t('dynamicPrompts.maxPrompts')} + { if (isError) { return ( - - - - - + + + ); } return ( - <> - - {label} - + + + {label} + { )} - + ); }; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx index 069f41ff3c..87a860ac89 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx @@ -1,6 +1,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import { isSeedBehaviour, seedBehaviourChanged, @@ -44,11 +45,13 @@ const ParamDynamicPromptsSeedBehaviour = () => { ); return ( - - {t('dynamicPrompts.seedBehaviour.label')} + + + {t('dynamicPrompts.seedBehaviour.label')} + ); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index 1278f31667..0960c51417 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx @@ -3,6 +3,7 @@ import { Checkbox, Flex, FormControl, + FormErrorMessage, FormLabel, Input, } from '@invoke-ai/ui'; @@ -120,10 +121,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { return (
- + {t('modelManager.model')} { value.trim().length > 3 || 'Must be at least 3 characters', })} /> + {errors.model_name?.message && ( + {errors.model_name?.message} + )} control={control} name="base_model" /> - + {t('modelManager.modelLocation')} { onBlur, })} /> + {errors.path?.message && ( + {errors.path?.message} + )} {t('modelManager.description')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx index 2938662150..18e55ff686 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx @@ -1,4 +1,11 @@ -import { Button, Flex, FormControl, FormLabel, Input } from '@invoke-ai/ui'; +import { + Button, + Flex, + FormControl, + FormErrorMessage, + FormLabel, + Input, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; @@ -103,10 +110,7 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => { return ( - + {t('modelManager.name')} { value.trim().length > 3 || 'Must be at least 3 characters', })} /> + {errors.model_name?.message && ( + {errors.model_name?.message} + )} {t('modelManager.baseModel')} @@ -122,10 +129,7 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => { name="base_model" /> - + {t('modelManager.modelLocation')} { value.trim().length > 0 || 'Must provide a path', onBlur, })} - /> + />{' '} + {errors.path?.message && ( + {errors.path?.message} + )} {t('modelManager.description')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx index 94d6574c0e..8c113f5da5 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx @@ -7,6 +7,7 @@ import { CompositeSlider, Flex, FormControl, + FormHelperText, FormLabel, Input, Radio, @@ -318,7 +319,7 @@ const MergeModelsPanel = () => { gap={4} bg="base.800" > - + {t('modelManager.alpha')} { onChange={handleChangeModelMergeAlpha} onReset={handleResetModelMergeAlpha} /> + + {t('modelManager.modelMergeAlphaHelp')} + diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index 7f76140555..549c725b34 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -5,6 +5,7 @@ import { Divider, Flex, FormControl, + FormErrorMessage, FormLabel, Input, Text, @@ -139,10 +140,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { > - + {t('modelManager.name')} { value.trim().length > 3 || 'Must be at least 3 characters', })} /> + {errors.model_name?.message && ( + + {errors.model_name?.message} + + )} {t('modelManager.description')} @@ -163,10 +166,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { control={control} name="variant" /> - + {t('modelManager.modelLocation')} { value.trim().length > 0 || 'Must provide a path', })} /> + {errors.path?.message && ( + {errors.path?.message} + )} {t('modelManager.vaeLocation')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index 03f7c7ffaf..a873d06e61 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx @@ -3,6 +3,7 @@ import { Divider, Flex, FormControl, + FormErrorMessage, FormLabel, Input, Text, @@ -103,10 +104,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => { - + {t('modelManager.name')} { value.trim().length > 3 || 'Must be at least 3 characters', })} /> + {errors.model_name?.message && ( + {errors.model_name?.message} + )} {t('modelManager.description')} @@ -127,10 +128,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => { control={control} name="variant" /> - + {t('modelManager.modelLocation')} { value.trim().length > 0 || 'Must provide a path', })} /> + {errors.path?.message && ( + {errors.path?.message} + )} {t('modelManager.vaeLocation')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx index 3e0b4c91ee..67a6f5c1e5 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx @@ -3,6 +3,7 @@ import { Divider, Flex, FormControl, + FormErrorMessage, FormLabel, Input, Text, @@ -104,10 +105,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => { - + {t('modelManager.name')} { value.trim().length > 3 || 'Must be at least 3 characters', })} /> + {errors.model_name?.message && ( + {errors.model_name?.message} + )} {t('modelManager.description')} @@ -125,10 +126,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => { name="base_model" /> - + {t('modelManager.modelLocation')} { value.trim().length > 0 || 'Must provide a path', })} /> + {errors.path?.message && ( + {errors.path?.message} + )}