Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): update components & logic to use new unified slice (again)

Browse Source
This commit is contained in:
psychedelicious 2024-06-16 00:13:24 +10:00
parent 6b9e0e6d63
commit 775479ab7b
11 changed files with 51 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import { CompositeNumberInput } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setIterations } from 'features/canvas/store/canvasSlice';
import { setIterations } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react';
export const QueueIterationsNumberInput = memo(() => {

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
View File

@ -1,7 +1,7 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
import { setRefinerCFGScale } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';

7
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
View File

@ -1,22 +1,19 @@
import { Box, Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { useModelCombobox } from 'common/hooks/useModelCombobox';
import { refinerModelChanged } from 'features/controlLayers/store/canvasV2Slice';
import { zModelIdentifierField } from 'features/nodes/types/common';
import { refinerModelChanged, selectSdxlSlice } from 'features/sdxl/store/sdxlSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useRefinerModels } from 'services/api/hooks/modelsByType';
import type { MainModelConfig } from 'services/api/types';
const selectModel = createMemoizedSelector(selectSdxlSlice, (sdxl) => sdxl.refinerModel);
const optionsFilter = (model: MainModelConfig) => model.base === 'sdxl-refiner';
const ParamSDXLRefinerModelSelect = () => {
const dispatch = useAppDispatch();
const model = useAppSelector(selectModel);
const model = useAppSelector((s) => s.canvasV2.params.refinerModel);
const { t } = useTranslation();
const [modelConfigs, { isLoading }] = useRefinerModels();
const _onChange = useCallback(

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
View File

@ -1,7 +1,7 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice';
import { setRefinerNegativeAestheticScore } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
View File

@ -1,7 +1,7 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice';
import { setRefinerPositiveAestheticScore } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
View File

@ -2,9 +2,9 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setRefinerScheduler } from 'features/controlLayers/store/canvasV2Slice';
import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
import { setRefinerScheduler } from 'features/sdxl/store/sdxlSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
View File

@ -1,7 +1,7 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
import { setRefinerStart } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';

2
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
View File

@ -1,7 +1,7 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
import { setRefinerSteps } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';

22
invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
View File

@ -3,6 +3,7 @@ import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-libra
import { skipToken } from '@reduxjs/toolkit/query';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier';
import ParamClipSkip from 'features/parameters/components/Advanced/ParamClipSkip';
import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSeamlessXAxis';
@ -12,7 +13,6 @@ import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSee
import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
import { selectGenerationSlice } from 'features/canvas/store/canvasSlice';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useMemo } from 'react';
@ -34,24 +34,24 @@ export const AdvancedSettingsAccordion = memo(() => {
const selectBadges = useMemo(
() =>
createMemoizedSelector(selectGenerationSlice, (generation) => {
createMemoizedSelector(selectCanvasV2Slice, ({ params }) => {
const badges: (string | number)[] = [];
if (vaeConfig) {
let vaeBadge = vaeConfig.name;
if (generation.vaePrecision === 'fp16') {
vaeBadge += ` ${generation.vaePrecision}`;
if (params.vaePrecision === 'fp16') {
vaeBadge += ` ${params.vaePrecision}`;
}
badges.push(vaeBadge);
} else if (generation.vaePrecision === 'fp16') {
badges.push(`VAE ${generation.vaePrecision}`);
} else if (params.vaePrecision === 'fp16') {
badges.push(`VAE ${params.vaePrecision}`);
}
if (generation.clipSkip) {
badges.push(`Skip ${generation.clipSkip}`);
if (params.clipSkip) {
badges.push(`Skip ${params.clipSkip}`);
}
if (generation.cfgRescaleMultiplier) {
badges.push(`Rescale ${generation.cfgRescaleMultiplier}`);
if (params.cfgRescaleMultiplier) {
badges.push(`Rescale ${params.cfgRescaleMultiplier}`);
}
if (generation.seamlessXAxis || generation.seamlessYAxis) {
if (params.seamlessXAxis || params.seamlessYAxis) {
badges.push('seamless');
}
if (activeTabName === 'upscaling' && !generation.shouldRandomizeSeed) {

63
invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
View File

@ -12,41 +12,36 @@ import ParamImageToImageStrength from 'features/parameters/components/Canvas/Par
import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput';
import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize';
import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
import { selectGenerationSlice } from 'features/canvas/store/canvasSlice';
import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { ImageSizeLinear } from './ImageSizeLinear';
const selector = createMemoizedSelector(
[selectGenerationSlice, selectHrfSlice, selectCanvasV2Slice, activeTabNameSelector],
(generation, hrf, canvasV2, activeTabName) => {
const { shouldRandomizeSeed, model } = generation;
const { hrfEnabled } = hrf;
const badges: string[] = [];
const isSDXL = model?.base === 'sdxl';
const selector = createMemoizedSelector([selectHrfSlice, selectCanvasV2Slice], (hrf, canvasV2) => {
const { shouldRandomizeSeed, model } = canvasV2.params;
const { hrfEnabled } = hrf;
const badges: string[] = [];
const isSDXL = model?.base === 'sdxl';
const { aspectRatio, width, height } = canvasV2.document;
badges.push(`${width}×${height}`);
badges.push(aspectRatio.id);
const { aspectRatio, width, height } = canvasV2.document;
badges.push(`${width}×${height}`);
badges.push(aspectRatio.id);
if (aspectRatio.isLocked) {
badges.push('locked');
}
if (!shouldRandomizeSeed) {
badges.push('Manual Seed');
}
if (hrfEnabled && !isSDXL) {
badges.push('HiRes Fix');
}
return { badges, activeTabName, isSDXL };
if (aspectRatio.isLocked) {
badges.push('locked');
}
);
if (!shouldRandomizeSeed) {
badges.push('Manual Seed');
}
if (hrfEnabled && !isSDXL) {
badges.push('HiRes Fix');
}
return { badges, isSDXL };
});
const scalingLabelProps: FormLabelProps = {
minW: '4.5rem',
@ -54,7 +49,7 @@ const scalingLabelProps: FormLabelProps = {
export const ImageSettingsAccordion = memo(() => {
const { t } = useTranslation();
const { badges, activeTabName, isSDXL } = useAppSelector(selector);
const { badges, isSDXL } = useAppSelector(selector);
const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
id: 'image-settings',
defaultIsOpen: true,
@ -83,16 +78,12 @@ export const ImageSettingsAccordion = memo(() => {
<ParamSeedShuffle />
<ParamSeedRandomize />
</Flex>
{activeTabName === 'generation' && !isSDXL && <HrfSettings />}
{activeTabName === 'canvas' && (
<>
<ParamScaleBeforeProcessing />
<FormControlGroup formLabelProps={scalingLabelProps}>
<ParamScaledWidth />
<ParamScaledHeight />
</FormControlGroup>
</>
)}
{!isSDXL && <HrfSettings />}
<ParamScaleBeforeProcessing />
<FormControlGroup formLabelProps={scalingLabelProps}>
<ParamScaledWidth />
<ParamScaledHeight />
</FormControlGroup>
</Flex>
</Expander>
</Flex>

6
invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
View File

@ -2,6 +2,7 @@ import type { FormLabelProps } from '@invoke-ai/ui-library';
import { Flex, FormControlGroup, StandaloneAccordion, Text } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import ParamSDXLRefinerCFGScale from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale';
import ParamSDXLRefinerModelSelect from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect';
import ParamSDXLRefinerNegativeAestheticScore from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore';
@ -9,7 +10,6 @@ import ParamSDXLRefinerPositiveAestheticScore from 'features/sdxl/components/SDX
import ParamSDXLRefinerScheduler from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler';
import ParamSDXLRefinerStart from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart';
import ParamSDXLRefinerSteps from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps';
import { selectSdxlSlice } from 'features/sdxl/store/sdxlSlice';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { isNil } from 'lodash-es';
import { memo } from 'react';
@ -24,7 +24,9 @@ const stepsScaleLabelProps: FormLabelProps = {
minW: '5rem',
};
const selectBadges = createMemoizedSelector(selectSdxlSlice, (sdxl) => (sdxl.refinerModel ? ['Enabled'] : undefined));
const selectBadges = createMemoizedSelector(selectCanvasV2Slice, ({ params }) =>
params.refinerModel ? ['Enabled'] : undefined
);
export const RefinerSettingsAccordion: React.FC = memo(() => {
const { t } = useTranslation();