github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-19 05:14:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): bump @invoke-ai/ui, fix TS issues

Browse Source
This commit is contained in:
psychedelicious
2024-01-20 20:03:12 +11:00
parent 580d29257c
commit be72765d02
40 changed files with 313 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx
View File

@@ -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 (
<FormControl isDisabled={!isEnabled} feature="controlNetControlMode">
<FormLabel>{t('controlnet.controlMode')}</FormLabel>
<FormControl isDisabled={!isEnabled}>
<InformationalPopover feature="controlNetControlMode">
<FormLabel>{t('controlnet.controlMode')}</FormLabel>
</InformationalPopover>
<Combobox
value={value}
options={CONTROL_MODE_DATA}

7
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx
View File

@@ -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 { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
import { useControlAdapterResizeMode } from 'features/controlAdapters/hooks/useControlAdapterResizeMode';
import { controlAdapterResizeModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
@@ -54,8 +55,10 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => {
}
return (
<FormControl feature="controlNetResizeMode">
<FormLabel>{t('controlnet.resizeMode')}</FormLabel>
<FormControl>
<InformationalPopover feature="controlNetResizeMode">
<FormLabel>{t('controlnet.resizeMode')}</FormLabel>
</InformationalPopover>
<Combobox
value={value}
options={options}

7
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
View File

@@ -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 { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
import { useControlAdapterWeight } from 'features/controlAdapters/hooks/useControlAdapterWeight';
import { controlAdapterWeightChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
@@ -48,8 +49,10 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
}
return (
<FormControl isDisabled={!isEnabled} feature="controlNetWeight">
<FormLabel>{t('controlnet.weight')}</FormLabel>
<FormControl isDisabled={!isEnabled}>
<InformationalPopover feature="controlNetWeight">
<FormLabel>{t('controlnet.weight')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={weight}
onChange={onChange}

2
invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx
View File

@@ -25,7 +25,7 @@ export const DynamicPromptsModal = memo(() => {
<ModalContent w="80vw" h="80vh" maxW="unset" maxH="unset">
<ModalHeader>{t('dynamicPrompts.dynamicPrompts')}</ModalHeader>
<ModalCloseButton />
<ModalBody as={Flex} flexDir="column" gap={2} w="full" h="full" pb={4}>
<ModalBody as={Flex} flexDir="column" gap={4} w="full" h="full" pb={4}>
<Flex gap={4}>
<ParamDynamicPromptsSeedBehaviour />
<ParamDynamicPromptsMaxPrompts />

11
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
View File

@@ -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 (
<FormControl
isDisabled={isDisabled}
feature="dynamicPromptsMaxPrompts"
renderInfoPopoverInPortal={false}
>
<FormLabel>{t('dynamicPrompts.maxPrompts')}</FormLabel>
<FormControl isDisabled={isDisabled}>
<InformationalPopover feature="dynamicPromptsMaxPrompts" inPortal={false}>
<FormLabel>{t('dynamicPrompts.maxPrompts')}</FormLabel>
</InformationalPopover>
<CompositeSlider
min={sliderMin}
max={sliderMax}

50
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
View File

@@ -1,9 +1,17 @@
import type { ChakraProps } from '@invoke-ai/ui';
import { Flex, ListItem, OrderedList, Spinner, Text } from '@invoke-ai/ui';
import {
Flex,
FormControl,
FormLabel,
ListItem,
OrderedList,
Spinner,
Text,
} from '@invoke-ai/ui';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { memo, useMemo } from 'react';
@@ -36,29 +44,27 @@ const ParamDynamicPromptsPreview = () => {
if (isError) {
return (
<IAIInformationalPopover feature="dynamicPrompts">
<Flex
w="full"
h="full"
layerStyle="second"
alignItems="center"
justifyContent="center"
p={8}
>
<IAINoContentFallback
icon={PiWarningCircleBold}
label="Problem generating prompts"
/>
</Flex>
</IAIInformationalPopover>
<Flex
w="full"
h="full"
layerStyle="second"
alignItems="center"
justifyContent="center"
p={8}
>
<IAINoContentFallback
icon={PiWarningCircleBold}
label="Problem generating prompts"
/>
</Flex>
);
}
return (
<>
<Text fontSize="sm" fontWeight="bold">
{label}
</Text>
<FormControl orientation="vertical" w="full" h="full">
<InformationalPopover feature="dynamicPrompts" inPortal={false}>
<FormLabel>{label}</FormLabel>
</InformationalPopover>
<Flex
w="full"
h="full"
@@ -96,7 +102,7 @@ const ParamDynamicPromptsPreview = () => {
</Flex>
)}
</Flex>
</>
</FormControl>
);
};

13
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
View File

@@ -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 (
<FormControl
feature="dynamicPromptsSeedBehaviour"
renderInfoPopoverInPortal={false}
>
<FormLabel>{t('dynamicPrompts.seedBehaviour.label')}</FormLabel>
<FormControl>
<InformationalPopover
feature="dynamicPromptsSeedBehaviour"
inPortal={false}
>
<FormLabel>{t('dynamicPrompts.seedBehaviour.label')}</FormLabel>
</InformationalPopover>
<Combobox value={value} options={options} onChange={handleChange} />
</FormControl>
);

17
invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
View File

@@ -3,6 +3,7 @@ import {
Checkbox,
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Input,
} from '@invoke-ai/ui';
@@ -120,10 +121,7 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
return (
<form onSubmit={handleSubmit(onSubmit)} style={formStyles}>
<Flex flexDirection="column" gap={2}>
<FormControl
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<FormControl isInvalid={Boolean(errors.model_name)}>
<FormLabel>{t('modelManager.model')}</FormLabel>
<Input
{...register('model_name', {
@@ -131,15 +129,15 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
{errors.model_name?.message && (
<FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
)}
</FormControl>
<BaseModelSelect<CheckpointModelConfig>
control={control}
name="base_model"
/>
<FormControl
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<FormControl isInvalid={Boolean(errors.path)}>
<FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input
{...register('path', {
@@ -148,6 +146,9 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
onBlur,
})}
/>
{errors.path?.message && (
<FormErrorMessage>{errors.path?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.description')}</FormLabel>

27
invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
View File

@@ -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 (
<form onSubmit={handleSubmit(onSubmit)} style={formStyles}>
<Flex flexDirection="column" gap={2}>
<FormControl
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<FormControl isInvalid={Boolean(errors.model_name)}>
<FormLabel>{t('modelManager.name')}</FormLabel>
<Input
{...register('model_name', {
@@ -114,6 +118,9 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
{errors.model_name?.message && (
<FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.baseModel')}</FormLabel>
@@ -122,10 +129,7 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
name="base_model"
/>
</FormControl>
<FormControl
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<FormControl isInvalid={Boolean(errors.path)}>
<FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input
{...register('path', {
@@ -133,7 +137,10 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
value.trim().length > 0 || 'Must provide a path',
onBlur,
})}
/>
/>{' '}
{errors.path?.message && (
<FormErrorMessage>{errors.path?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.description')}</FormLabel>

6
invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
View File

@@ -7,6 +7,7 @@ import {
CompositeSlider,
Flex,
FormControl,
FormHelperText,
FormLabel,
Input,
Radio,
@@ -318,7 +319,7 @@ const MergeModelsPanel = () => {
gap={4}
bg="base.800"
>
<FormControl helperText={t('modelManager.modelMergeAlphaHelp')}>
<FormControl>
<FormLabel>{t('modelManager.alpha')}</FormLabel>
<CompositeSlider
min={0.01}
@@ -337,6 +338,9 @@ const MergeModelsPanel = () => {
onChange={handleChangeModelMergeAlpha}
onReset={handleResetModelMergeAlpha}
/>
<FormHelperText>
{t('modelManager.modelMergeAlphaHelp')}
</FormHelperText>
</FormControl>
</Flex>

19
invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
View File

@@ -5,6 +5,7 @@ import {
Divider,
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Text,
@@ -139,10 +140,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<FormControl
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<FormControl isInvalid={Boolean(errors.model_name)}>
<FormLabel>{t('modelManager.name')}</FormLabel>
<Input
{...register('model_name', {
@@ -150,6 +148,11 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
{errors.model_name?.message && (
<FormErrorMessage>
{errors.model_name?.message}
</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.description')}</FormLabel>
@@ -163,10 +166,7 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
control={control}
name="variant"
/>
<FormControl
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<FormControl isInvalid={Boolean(errors.path)}>
<FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input
{...register('path', {
@@ -174,6 +174,9 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
value.trim().length > 0 || 'Must provide a path',
})}
/>
{errors.path?.message && (
<FormErrorMessage>{errors.path?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.vaeLocation')}</FormLabel>

17
invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
View File

@@ -3,6 +3,7 @@ import {
Divider,
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Text,
@@ -103,10 +104,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<FormControl
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<FormControl isInvalid={Boolean(errors.model_name)}>
<FormLabel>{t('modelManager.name')}</FormLabel>
<Input
{...register('model_name', {
@@ -114,6 +112,9 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
{errors.model_name?.message && (
<FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.description')}</FormLabel>
@@ -127,10 +128,7 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
control={control}
name="variant"
/>
<FormControl
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<FormControl isInvalid={Boolean(errors.path)}>
<FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input
{...register('path', {
@@ -138,6 +136,9 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
value.trim().length > 0 || 'Must provide a path',
})}
/>
{errors.path?.message && (
<FormErrorMessage>{errors.path?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.vaeLocation')}</FormLabel>

17
invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
View File

@@ -3,6 +3,7 @@ import {
Divider,
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Text,
@@ -104,10 +105,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
<form onSubmit={handleSubmit(onSubmit)}>
<Flex flexDirection="column" overflowY="scroll" gap={4}>
<FormControl
isInvalid={Boolean(errors.model_name)}
error={errors.model_name?.message}
>
<FormControl isInvalid={Boolean(errors.model_name)}>
<FormLabel>{t('modelManager.name')}</FormLabel>
<Input
{...register('model_name', {
@@ -115,6 +113,9 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
value.trim().length > 3 || 'Must be at least 3 characters',
})}
/>
{errors.model_name?.message && (
<FormErrorMessage>{errors.model_name?.message}</FormErrorMessage>
)}
</FormControl>
<FormControl>
<FormLabel>{t('modelManager.description')}</FormLabel>
@@ -125,10 +126,7 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
name="base_model"
/>
<FormControl
isInvalid={Boolean(errors.path)}
error={errors.path?.message}
>
<FormControl isInvalid={Boolean(errors.path)}>
<FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input
{...register('path', {
@@ -136,6 +134,9 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => {
value.trim().length > 0 || 'Must provide a path',
})}
/>
{errors.path?.message && (
<FormErrorMessage>{errors.path?.message}</FormErrorMessage>
)}
</FormControl>
<Button type="submit" isLoading={isLoading}>
{t('modelManager.updateModel')}

20
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
View File

@@ -2,6 +2,7 @@ import {
Divider,
Flex,
FormControl,
FormHelperText,
FormLabel,
Heading,
Modal,
@@ -110,46 +111,55 @@ const WorkflowEditorSettings = ({ children }: Props) => {
<ModalBody>
<Flex flexDirection="column" gap={4} py={4}>
<Heading size="sm">{t('parameters.general')}</Heading>
<FormControl helperText={t('nodes.animatedEdgesHelp')}>
<FormControl>
<FormLabel>{t('nodes.animatedEdges')}</FormLabel>
<Switch
onChange={handleChangeShouldAnimate}
isChecked={shouldAnimateEdges}
/>
<FormHelperText>{t('nodes.animatedEdgesHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl helperText={t('nodes.snapToGridHelp')}>
<FormControl>
<FormLabel>{t('nodes.snapToGrid')}</FormLabel>
<Switch
isChecked={shouldSnapToGrid}
onChange={handleChangeShouldSnap}
/>
<FormHelperText>{t('nodes.snapToGridHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl helperText={t('nodes.colorCodeEdgesHelp')}>
<FormControl>
<FormLabel>{t('nodes.colorCodeEdges')}</FormLabel>
<Switch
isChecked={shouldColorEdges}
onChange={handleChangeShouldColor}
/>
<FormHelperText>{t('nodes.colorCodeEdgesHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl helperText={t('nodes.fullyContainNodesHelp')}>
<FormControl>
<FormLabel>{t('nodes.fullyContainNodes')}</FormLabel>
<Switch
isChecked={selectionModeIsChecked}
onChange={handleChangeSelectionMode}
/>
<FormHelperText>
{t('nodes.fullyContainNodesHelp')}
</FormHelperText>
</FormControl>
<Heading size="sm" pt={4}>
{t('common.advanced')}
</Heading>
<FormControl helperText={t('nodes.validateConnectionsHelp')}>
<FormControl>
<FormLabel>{t('nodes.validateConnections')}</FormLabel>
<Switch
isChecked={shouldValidateGraph}
onChange={handleChangeShouldValidate}
/>
<FormHelperText>
{t('nodes.validateConnectionsHelp')}
</FormHelperText>
</FormControl>
<ReloadNodeTemplatesButton />
</Flex>

7
invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
View File

@@ -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 { setCfgRescaleMultiplier } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -44,8 +45,10 @@ const ParamCFGRescaleMultiplier = () => {
);
return (
<FormControl feature="paramCFGRescaleMultiplier">
<FormLabel>{t('parameters.cfgRescaleMultiplier')}</FormLabel>
<FormControl>
<InformationalPopover feature="paramCFGRescaleMultiplier">
<FormLabel>{t('parameters.cfgRescaleMultiplier')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={cfgRescaleMultiplier}
defaultValue={initial}

7
invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
View File

@@ -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 { setClipSkip } from 'features/parameters/store/generationSlice';
import { CLIP_SKIP_MAP } from 'features/parameters/types/constants';
import { memo, useCallback, useMemo } from 'react';
@@ -50,8 +51,10 @@ const ParamClipSkip = () => {
}
return (
<FormControl feature="clipSkip">
<FormLabel>{t('parameters.clipSkip')}</FormLabel>
<FormControl>
<InformationalPopover feature="clipSkip">
<FormLabel>{t('parameters.clipSkip')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={clipSkip}
defaultValue={initial}

7
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
View File

@@ -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 { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
import { isParameterCanvasCoherenceMode } from 'features/parameters/types/parameterSchemas';
import { memo, useCallback, useMemo } from 'react';
@@ -39,8 +40,10 @@ const ParamCanvasCoherenceMode = () => {
);
return (
<FormControl feature="compositingCoherenceMode">
<FormLabel>{t('parameters.coherenceMode')}</FormLabel>
<FormControl>
<InformationalPopover feature="compositingCoherenceMode">
<FormLabel>{t('parameters.coherenceMode')}</FormLabel>
</InformationalPopover>
<Combobox options={options} value={value} onChange={onChange} />
</FormControl>
);

7
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
View File

@@ -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 { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -46,8 +47,10 @@ const ParamCanvasCoherenceSteps = () => {
);
return (
<FormControl feature="compositingCoherenceSteps">
<FormLabel>{t('parameters.coherenceSteps')}</FormLabel>
<FormControl>
<InformationalPopover feature="compositingCoherenceSteps">
<FormLabel>{t('parameters.coherenceSteps')}</FormLabel>
</InformationalPopover>
<CompositeSlider
min={sliderMin}
max={sliderMax}

7
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
View File

@@ -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 { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -24,8 +25,10 @@ const ParamCanvasCoherenceStrength = () => {
);
return (
<FormControl feature="compositingStrength">
<FormLabel>{t('parameters.coherenceStrength')}</FormLabel>
<FormControl>
<InformationalPopover feature="compositingStrength">
<FormLabel>{t('parameters.coherenceStrength')}</FormLabel>
</InformationalPopover>
<CompositeSlider
min={0}
max={1}

7
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
View File

@@ -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 { setMaskBlur } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -33,8 +34,10 @@ const ParamMaskBlur = () => {
);
return (
<FormControl feature="compositingBlur">
<FormLabel>{t('parameters.maskBlur')}</FormLabel>
<FormControl>
<InformationalPopover feature="compositingBlur">
<FormLabel>{t('parameters.maskBlur')}</FormLabel>
</InformationalPopover>
<CompositeSlider
min={sliderMin}
max={sliderMax}

7
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
View File

@@ -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 { setMaskBlurMethod } from 'features/parameters/store/generationSlice';
import { isParameterMaskBlurMethod } from 'features/parameters/types/parameterSchemas';
import { memo, useCallback, useMemo } from 'react';
@@ -32,8 +33,10 @@ const ParamMaskBlurMethod = () => {
);
return (
<FormControl feature="compositingBlurMethod">
<FormLabel>{t('parameters.maskBlurMethod')}</FormLabel>
<FormControl>
<InformationalPopover feature="compositingBlurMethod">
<FormLabel>{t('parameters.maskBlurMethod')}</FormLabel>
</InformationalPopover>
<Combobox value={value} onChange={onChange} options={options} />
</FormControl>
);

7
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMethod.tsx
View File

@@ -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 { setInfillMethod } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -38,8 +39,10 @@ const ParamInfillMethod = () => {
);
return (
<FormControl isDisabled={options.length === 0} feature="infillMethod">
<FormLabel>{t('parameters.infillMethod')}</FormLabel>
<FormControl isDisabled={options.length === 0}>
<InformationalPopover feature="infillMethod">
<FormLabel>{t('parameters.infillMethod')}</FormLabel>
</InformationalPopover>
<Combobox value={value} options={options} onChange={onChange} />
</FormControl>
);

7
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
View File

@@ -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 { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
import { isBoundingBoxScaleMethod } from 'features/canvas/store/canvasTypes';
import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
@@ -37,8 +38,10 @@ const ParamScaleBeforeProcessing = () => {
);
return (
<FormControl feature="scaleBeforeProcessing">
<FormLabel>{t('parameters.scaleBeforeProcessing')}</FormLabel>
<FormControl>
<InformationalPopover feature="scaleBeforeProcessing">
<FormLabel>{t('parameters.scaleBeforeProcessing')}</FormLabel>
</InformationalPopover>
<Combobox value={value} options={OPTIONS} onChange={onChange} />
</FormControl>
);

7
invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
View File

@@ -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 { setCfgScale } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -34,8 +35,10 @@ const ParamCFGScale = () => {
);
return (
<FormControl feature="paramCFGScale">
<FormLabel>{t('parameters.cfgScale')}</FormLabel>
<FormControl>
<InformationalPopover feature="paramCFGScale">
<FormLabel>{t('parameters.cfgScale')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={cfgScale}
defaultValue={initial}

7
invokeai/frontend/web/src/features/parameters/components/Core/ParamScheduler.tsx
View File

@@ -1,6 +1,7 @@
import type { ComboboxOnChange } 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 { setScheduler } from 'features/parameters/store/generationSlice';
import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
@@ -28,8 +29,10 @@ const ParamScheduler = () => {
);
return (
<FormControl feature="paramScheduler">
<FormLabel>{t('parameters.scheduler')}</FormLabel>
<FormControl>
<InformationalPopover feature="paramScheduler">
<FormLabel>{t('parameters.scheduler')}</FormLabel>
</InformationalPopover>
<Combobox value={value} options={SCHEDULER_OPTIONS} onChange={onChange} />
</FormControl>
);

7
invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
View File

@@ -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 { setSteps } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -36,8 +37,10 @@ const ParamSteps = () => {
);
return (
<FormControl feature="paramSteps">
<FormLabel>{t('parameters.steps')}</FormLabel>
<FormControl>
<InformationalPopover feature="paramSteps">
<FormLabel>{t('parameters.steps')}</FormLabel>
</InformationalPopover>
<CompositeSlider
value={steps}
defaultValue={initial}

7
invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
View File

@@ -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 { setImg2imgStrength } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -39,8 +40,10 @@ const ImageToImageStrength = () => {
);
return (
<FormControl feature="paramDenoisingStrength">
<FormLabel>{`${t('parameters.denoisingStrength')}`}</FormLabel>
<FormControl>
<InformationalPopover feature="paramDenoisingStrength">
<FormLabel>{`${t('parameters.denoisingStrength')}`}</FormLabel>
</InformationalPopover>
<CompositeSlider
step={coarseStep}
fineStep={fineStep}

7
invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
View File

@@ -1,6 +1,7 @@
import { CompositeNumberInput, FormControl, FormLabel } from '@invoke-ai/ui';
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setSeed } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -21,8 +22,10 @@ export const ParamSeedNumberInput = memo(() => {
);
return (
<FormControl flexGrow={1} feature="paramSeed">
<FormLabel>{t('parameters.seed')}</FormLabel>
<FormControl flexGrow={1}>
<InformationalPopover feature="paramSeed">
<FormLabel>{t('parameters.seed')}</FormLabel>
</InformationalPopover>
<CompositeNumberInput
step={1}
min={NUMPY_RAND_MIN}

11
invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
View File

@@ -1,6 +1,7 @@
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
import {
selectGenerationSlice,
@@ -46,12 +47,10 @@ const ParamVAEModelSelect = () => {
});
return (
<FormControl
isDisabled={!options.length}
isInvalid={!options.length}
feature="paramVAE"
>
<FormLabel>{t('modelManager.vae')}</FormLabel>
<FormControl isDisabled={!options.length} isInvalid={!options.length}>
<InformationalPopover feature="paramVAE">
<FormLabel>{t('modelManager.vae')}</FormLabel>
</InformationalPopover>
<Combobox
isClearable
value={value}

7
invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx
View File

@@ -1,6 +1,7 @@
import type { ComboboxOnChange } 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 { vaePrecisionChanged } from 'features/parameters/store/generationSlice';
import { isParameterPrecision } from 'features/parameters/types/parameterSchemas';
import { memo, useCallback, useMemo } from 'react';
@@ -33,8 +34,10 @@ const ParamVAEModelSelect = () => {
);
return (
<FormControl feature="paramVAEPrecision" w="14rem" flexShrink={0}>
<FormLabel>{t('modelManager.vaePrecision')}</FormLabel>
<FormControl w="14rem" flexShrink={0}>
<InformationalPopover feature="paramVAEPrecision">
<FormLabel>{t('modelManager.vaePrecision')}</FormLabel>
</InformationalPopover>
<Combobox value={value} options={options} onChange={onChange} />
</FormControl>
);

6
invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx
View File

@@ -1,6 +1,6 @@
import { CompositeNumberInput } from '@invoke-ai/ui';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setIterations } from 'features/parameters/store/generationSlice';
import { memo, useCallback } from 'react';
@@ -17,7 +17,7 @@ export const QueueIterationsNumberInput = memo(() => {
);
return (
<IAIInformationalPopover feature="paramIterations">
<InformationalPopover feature="paramIterations">
<CompositeNumberInput
step={coarseStep}
fineStep={fineStep}
@@ -34,7 +34,7 @@ export const QueueIterationsNumberInput = memo(() => {
flexShrink={0}
variant="iterations"
/>
</IAIInformationalPopover>
</InformationalPopover>
);
});

10
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@@ -15,6 +15,7 @@ import {
useDisclosure,
} from '@invoke-ai/ui';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { useClearStorage } from 'common/hooks/useClearStorage';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
@@ -261,8 +262,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
onChange={handleChangeShouldAntialiasProgressImage}
/>
</FormControl>
<FormControl feature="noiseUseCPU">
<FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
<FormControl>
<InformationalPopover
feature="noiseUseCPU"
inPortal={false}
>
<FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
</InformationalPopover>
<Switch
isChecked={shouldUseCpuNoise}
onChange={handleChangeShouldUseCpuNoise}

2
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
View File

@@ -65,7 +65,7 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
w={10}
isDisabled={data.pages === 1}
onClick={p.page === page ? undefined : p.onClick}
variant={p.page === page ? 'invokeAI' : 'ghost'}
variant={p.page === page ? 'solid' : 'ghost'}
key={p.page}
transitionDuration="0s" // the delay in animation looks jank
>