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

feat(ui): restore tab names

Browse Source
This commit is contained in:
psychedelicious 2023-05-09 18:25:53 +10:00
parent c565812723
commit 279468c0e8
20 changed files with 90 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/public/locales/en.json
View File

@ -54,7 +54,7 @@
"img2img": "Image To Image",
"unifiedCanvas": "Unified Canvas",
"linear": "Linear",
"nodes": "Nodes",
"nodes": "Node Editor",
"postprocessing": "Post Processing",
"nodesDesc": "A node based system for the generation of images is under development currently. Stay tuned for updates about this amazing feature.",
"postProcessing": "Post Processing",

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedImageToImage.ts
View File

@ -10,7 +10,7 @@ const moduleLog = log.child({ namespace: 'invoke' });
export const addUserInvokedImageToImageListener = () => {
startAppListening({
predicate: (action): action is ReturnType<typeof userInvoked> =>
userInvoked.match(action) && action.payload === 'image',
userInvoked.match(action) && action.payload === 'img2img',
effect: (action, { getState, dispatch }) => {
const state = getState();

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedTextToImage.ts
View File

@ -10,7 +10,7 @@ const moduleLog = log.child({ namespace: 'invoke' });
export const addUserInvokedTextToImageListener = () => {
startAppListening({
predicate: (action): action is ReturnType<typeof userInvoked> =>
userInvoked.match(action) && action.payload === 'text',
userInvoked.match(action) && action.payload === 'txt2img',
effect: (action, { getState, dispatch }) => {
const state = getState();

4
invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
View File

@ -61,11 +61,11 @@ export const useGlobalHotkeys = () => {
});
useHotkeys('1', () => {
dispatch(setActiveTab('text'));
dispatch(setActiveTab('txt2img'));
});
useHotkeys('2', () => {
dispatch(setActiveTab('image'));
dispatch(setActiveTab('img2img'));
});
useHotkeys('3', () => {

2
invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
View File

@ -40,7 +40,7 @@ export const floatingParametersPanelButtonSelector = createSelector(
const shouldShowParametersPanelButton =
!canvasBetaLayoutCheck &&
!shouldShowParametersPanel &&
['text', 'image', 'unifiedCanvas'].includes(activeTabName);
['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
return {
shouldPinParametersPanel,

10
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -26,12 +26,12 @@ import { configSelector } from 'features/system/store/configSelectors';
import { isEqual } from 'lodash-es';
import { Panel, PanelGroup } from 'react-resizable-panels';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import TextTab from './tabs/text/TextTab';
import TextToImageTab from './tabs/TextToImage/TextToImageTab';
import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
import NodesTab from './tabs/Nodes/NodesTab';
import { FaImage } from 'react-icons/fa';
import ResizeHandle from './tabs/ResizeHandle';
import ImageTab from './tabs/image/ImageTab';
import ImageTab from './tabs/ImageToImage/ImageToImageTab';
export interface InvokeTabInfo {
id: InvokeTabName;
@ -41,12 +41,12 @@ export interface InvokeTabInfo {
const tabs: InvokeTabInfo[] = [
{
id: 'text',
id: 'txt2img',
icon: <Icon as={GoTextSize} sx={{ boxSize: 5 }} />,
content: <TextTab />,
content: <TextToImageTab />,
},
{
id: 'image',
id: 'img2img',
icon: <Icon as={FaImage} sx={{ boxSize: 5 }} />,
content: <ImageTab />,
},

12
invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
View File

@ -14,8 +14,8 @@ import {
import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
import PinParametersPanelButton from './PinParametersPanelButton';
import TextTabParameters from './tabs/text/TextTabParameters';
import ImageTabParameters from './tabs/image/ImageTabParameters';
import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters';
import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters';
@ -50,12 +50,12 @@ const ParametersDrawer = () => {
};
const drawerContent = useMemo(() => {
if (activeTabName === 'text') {
return <TextTabParameters />;
if (activeTabName === 'txt2img') {
return <TextToImageTabParameters />;
}
if (activeTabName === 'image') {
return <ImageTabParameters />;
if (activeTabName === 'img2img') {
return <ImageToImageTabParameters />;
}
if (activeTabName === 'unifiedCanvas') {

19
invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
View File

@ -3,10 +3,29 @@ import { PropsWithChildren, memo } from 'react';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import OverlayScrollable from './common/OverlayScrollable';
import PinParametersPanelButton from './PinParametersPanelButton';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from '../store/uiSelectors';
import { useAppSelector } from 'app/store/storeHooks';
const selector = createSelector(uiSelector, (ui) => {
const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
return {
shouldPinParametersPanel,
shouldShowParametersPanel,
};
});
type ParametersPinnedWrapperProps = PropsWithChildren;
const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
const { shouldPinParametersPanel, shouldShowParametersPanel } =
useAppSelector(selector);
if (!(shouldPinParametersPanel && shouldShowParametersPanel)) {
return null;
}
return (
<Box
sx={{

55
invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTab.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx
View File

@ -1,43 +1,16 @@
import { Box, Flex, Portal, TabPanel } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { memo, useCallback, useRef } from 'react';
import {
ImperativePanelHandle,
Panel,
PanelGroup,
} from 'react-resizable-panels';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { Panel, PanelGroup } from 'react-resizable-panels';
import { useAppDispatch } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import ResizeHandle from '../ResizeHandle';
import ImageTabParameters from './ImageTabParameters';
import ImageTabImageParameters from './ImageTabImageParameters';
import TextTabMain from '../text/TextTabMain';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import ImageToImageTabParameters from './ImageToImageTabParameters';
import TextToImageTabMain from '../TextToImage/TextToImageTabMain';
import { ImperativePanelGroupHandle } from 'react-resizable-panels';
import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay';
const selector = createSelector(uiSelector, (ui) => {
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldShowImageParameters,
} = ui;
return {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldShowImageParameters,
};
});
const TextTab = () => {
const ImageToImageTab = () => {
const dispatch = useAppDispatch();
const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
@ -49,21 +22,11 @@ const TextTab = () => {
panelGroupRef.current.setLayout([50, 50]);
}, []);
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldShowImageParameters,
} = useAppSelector(selector);
return (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
{shouldPinParametersPanel && shouldShowParametersPanel && (
<ParametersPinnedWrapper>
<ImageTabParameters />
<ImageToImageTabParameters />
</ParametersPinnedWrapper>
)}
<Box sx={{ w: 'full', h: 'full' }}>
<PanelGroup
ref={panelGroupRef}
@ -90,7 +53,7 @@ const TextTab = () => {
dispatch(requestCanvasRescale());
}}
>
<TextTabMain />
<TextToImageTabMain />
</Panel>
</PanelGroup>
</Box>
@ -98,4 +61,4 @@ const TextTab = () => {
);
};
export default memo(TextTab);
export default memo(ImageToImageTab);

4
invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabCoreParameters.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
View File

@ -24,7 +24,7 @@ const selector = createSelector(
defaultSelectorOptions
);
const ImageTabCoreParameters = () => {
const ImageToImageTabCoreParameters = () => {
const { shouldUseSliders } = useAppSelector(selector);
return (
@ -80,4 +80,4 @@ const ImageTabCoreParameters = () => {
);
};
export default memo(ImageTabCoreParameters);
export default memo(ImageToImageTabCoreParameters);

8
invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx → invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
View File

@ -7,15 +7,15 @@ import ParamVariationCollapse from 'features/parameters/components/Parameters/Va
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ImageTabCoreParameters from './ImageTabCoreParameters';
import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
const ImageTabParameters = () => {
const ImageToImageTabParameters = () => {
return (
<>
<ParamPositiveConditioning />
<ParamNegativeConditioning />
<ProcessButtons />
<ImageTabCoreParameters />
<ImageToImageTabCoreParameters />
<ParamSeedCollapse />
<ParamVariationCollapse />
<ParamNoiseCollapse />
@ -25,4 +25,4 @@ const ImageTabParameters = () => {
);
};
export default memo(ImageTabParameters);
export default memo(ImageToImageTabParameters);

18
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import TextToImageTabMain from './TextToImageTabMain';
import TextToImageTabParameters from './TextToImageTabParameters';
import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
const TextToImageTab = () => {
return (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
<ParametersPinnedWrapper>
<TextToImageTabParameters />
</ParametersPinnedWrapper>
<TextToImageTabMain />
</Flex>
);
};
export default memo(TextToImageTab);

4
invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx → invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
View File

@ -22,7 +22,7 @@ const selector = createSelector(
defaultSelectorOptions
);
const TextTabCoreParameters = () => {
const TextToImageTabCoreParameters = () => {
const { shouldUseSliders } = useAppSelector(selector);
return (
@ -74,4 +74,4 @@ const TextTabCoreParameters = () => {
);
};
export default memo(TextTabCoreParameters);
export default memo(TextToImageTabCoreParameters);

4
invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabMain.tsx → invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
View File

@ -1,7 +1,7 @@
import { Box, Flex } from '@chakra-ui/react';
import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
const TextTabMain = () => {
const TextToImageTabMain = () => {
return (
<Box
sx={{
@ -25,4 +25,4 @@ const TextTabMain = () => {
);
};
export default TextTabMain;
export default TextToImageTabMain;

8
invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx → invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
View File

@ -8,15 +8,15 @@ import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import TextTabCoreParameters from './TextTabCoreParameters';
import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
const TextTabParameters = () => {
const TextToImageTabParameters = () => {
return (
<>
<ParamPositiveConditioning />
<ParamNegativeConditioning />
<ProcessButtons />
<TextTabCoreParameters />
<TextToImageTabCoreParameters />
<ParamSeedCollapse />
<ParamVariationCollapse />
<ParamNoiseCollapse />
@ -27,4 +27,4 @@ const TextTabParameters = () => {
);
};
export default memo(TextTabParameters);
export default memo(TextToImageTabParameters);

33
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
View File

@ -1,54 +1,29 @@
import { Box, Flex, TabPanel } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import { useAppSelector } from 'app/store/storeHooks';
import UnifiedCanvasContent from './UnifiedCanvasContent';
import ResizeHandle from '../ResizeHandle';
import UnifiedCanvasParameters from './UnifiedCanvasParameters';
import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
const selector = createSelector(uiSelector, (ui) => {
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldUseCanvasBetaLayout,
} = ui;
const { shouldUseCanvasBetaLayout } = ui;
return {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldUseCanvasBetaLayout,
};
});
const UnifiedCanvasTab = () => {
const dispatch = useAppDispatch();
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldUseCanvasBetaLayout,
} = useAppSelector(selector);
const { shouldUseCanvasBetaLayout } = useAppSelector(selector);
return (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
{shouldPinParametersPanel && shouldShowParametersPanel && (
<ParametersPinnedWrapper>
<UnifiedCanvasParameters />
</ParametersPinnedWrapper>
)}
{shouldUseCanvasBetaLayout ? (
<UnifiedCanvasContentBeta />
) : (

61
invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx
View File

@ -1,61 +0,0 @@
import { Box, Flex } from '@chakra-ui/react';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import { memo } from 'react';
import OverlayScrollable from '../../common/OverlayScrollable';
import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning';
import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import ParamIterations from 'features/parameters/components/Parameters/ParamIterations';
import ParamSteps from 'features/parameters/components/Parameters/ParamSteps';
import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale';
import ParamWidth from 'features/parameters/components/Parameters/ParamWidth';
import ParamHeight from 'features/parameters/components/Parameters/ParamHeight';
import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler';
import ModelSelect from 'features/system/components/ModelSelect';
import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import InitialImagePreview from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview';
import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit';
import InitialImageButtons from 'common/components/ImageToImageButtons';
const selector = createSelector(
uiSelector,
(ui) => {
const { shouldUseSliders } = ui;
return { shouldUseSliders };
},
defaultSelectorOptions
);
const ImageTabParameters = () => {
const { shouldUseSliders } = useAppSelector(selector);
return (
<OverlayScrollable>
<Flex
sx={{
gap: 2,
flexDirection: 'column',
h: 'full',
w: 'full',
position: 'absolute',
}}
>
<InitialImageButtons />
<InitialImagePreview />
<ImageToImageFit />
</Flex>
</OverlayScrollable>
);
};
export default memo(ImageTabParameters);

55
invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx
View File

@ -1,55 +0,0 @@
import { Box, Flex, Portal, TabPanel } from '@chakra-ui/react';
import { memo } from 'react';
import { Panel, PanelGroup } from 'react-resizable-panels';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import TextTabMain from './TextTabMain';
import ResizeHandle from '../ResizeHandle';
import TextTabParameters from './TextTabParameters';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
const selector = createSelector(uiSelector, (ui) => {
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldShowImageParameters,
} = ui;
return {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldShowImageParameters,
};
});
const TextTab = () => {
const dispatch = useAppDispatch();
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldShowImageParameters,
} = useAppSelector(selector);
return (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
{shouldPinParametersPanel && shouldShowParametersPanel && (
<ParametersPinnedWrapper>
<TextTabParameters />
</ParametersPinnedWrapper>
)}
<TextTabMain />
</Flex>
);
};
export default memo(TextTab);

4
invokeai/frontend/web/src/features/ui/store/tabMap.ts
View File

@ -1,6 +1,6 @@
export const tabMap = [
'text',
'image',
'txt2img',
'img2img',
// 'generate',
'unifiedCanvas',
'nodes',

4
invokeai/frontend/web/src/features/ui/store/uiSlice.ts
View File

@ -105,11 +105,11 @@ export const uiSlice = createSlice({
}
},
openAccordionItemsChanged: (state, action: PayloadAction<number[]>) => {
if (tabMap[state.activeTab] === 'text') {
if (tabMap[state.activeTab] === 'txt2img') {
state.textTabAccordionState = action.payload;
}
if (tabMap[state.activeTab] === 'image') {
if (tabMap[state.activeTab] === 'img2img') {
state.imageTabAccordionState = action.payload;
}