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): make control layer ui exclusive to txt2img tab

Browse Source
This commit is contained in:
psychedelicious 2024-04-30 10:48:35 +10:00 committed by Kent Keirsey
parent 629110784d
commit 9ee7cad613
5 changed files with 100 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import StatusIndicator from 'features/system/components/StatusIndicator';
import { selectConfigSlice } from 'features/system/store/configSlice';
import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
import ParametersPanelTextToImage from 'features/ui/components/ParametersPanelTextToImage';
import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
import { usePanel } from 'features/ui/hooks/usePanel';
import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
@ -249,7 +250,7 @@ const InvokeTabs = () => {
onExpand={optionsPanel.onExpand}
collapsible
>
{activeTabName === 'nodes' ? <NodeEditorPanelGroup /> : <ParametersPanel />}
<ParametersPanelComponent />
</Panel>
<ResizeHandle
id="options-main-handle"
@ -292,3 +293,16 @@ const InvokeTabs = () => {
};
export default memo(InvokeTabs);
const ParametersPanelComponent = memo(() => {
const activeTabName = useAppSelector(activeTabNameSelector);
if (activeTabName === 'nodes') {
return <NodeEditorPanelGroup />;
}
if (activeTabName === 'txt2img') {
return <ParametersPanelTextToImage />;
}
return <ParametersPanel />;
});
ParametersPanelComponent.displayName = 'ParametersPanelComponent';

35
invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
View File

@ -1,10 +1,8 @@
import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { Box, Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { Prompts } from 'features/parameters/components/Prompts/Prompts';
import QueueControls from 'features/queue/components/QueueControls';
import { RegionalPromptsPanelContent } from 'features/regionalPrompts/components/RegionalPromptsPanelContent';
import { useRegionalControlTitle } from 'features/regionalPrompts/hooks/useRegionalControlTitle';
import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
import { CompositingSettingsAccordion } from 'features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion';
@ -16,7 +14,6 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const overlayScrollbarsStyles: CSSProperties = {
height: '100%',
@ -24,9 +21,7 @@ const overlayScrollbarsStyles: CSSProperties = {
};
const ParametersPanel = () => {
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector);
const regionalControlTitle = useRegionalControlTitle();
const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
return (
@ -37,28 +32,12 @@ const ParametersPanel = () => {
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<Flex gap={2} flexDirection="column" h="full" w="full">
{isSDXL ? <SDXLPrompts /> : <Prompts />}
<Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
<TabList>
<Tab>{t('parameters.globalSettings')}</Tab>
<Tab>{regionalControlTitle}</Tab>
</TabList>
<TabPanels w="full" h="full">
<TabPanel>
<Flex gap={2} flexDirection="column" h="full" w="full">
<ImageSettingsAccordion />
<GenerationSettingsAccordion />
{activeTabName !== 'txt2img' && <ControlSettingsAccordion />}
{activeTabName === 'unifiedCanvas' && <CompositingSettingsAccordion />}
{isSDXL && <RefinerSettingsAccordion />}
<AdvancedSettingsAccordion />
</Flex>
</TabPanel>
<TabPanel>
<RegionalPromptsPanelContent />
</TabPanel>
</TabPanels>
</Tabs>
<ImageSettingsAccordion />
<GenerationSettingsAccordion />
{activeTabName !== 'txt2img' && <ControlSettingsAccordion />}
{activeTabName === 'unifiedCanvas' && <CompositingSettingsAccordion />}
{isSDXL && <RefinerSettingsAccordion />}
<AdvancedSettingsAccordion />
</Flex>
</OverlayScrollbarsComponent>
</Box>

70
invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx Normal file
View File

@ -0,0 +1,70 @@
import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { Prompts } from 'features/parameters/components/Prompts/Prompts';
import QueueControls from 'features/queue/components/QueueControls';
import { RegionalPromptsPanelContent } from 'features/regionalPrompts/components/RegionalPromptsPanelContent';
import { useRegionalControlTitle } from 'features/regionalPrompts/hooks/useRegionalControlTitle';
import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
import { CompositingSettingsAccordion } from 'features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion';
import { ControlSettingsAccordion } from 'features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion';
import { GenerationSettingsAccordion } from 'features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion';
import { ImageSettingsAccordion } from 'features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion';
import { RefinerSettingsAccordion } from 'features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const overlayScrollbarsStyles: CSSProperties = {
height: '100%',
width: '100%',
};
const ParametersPanelTextToImage = () => {
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector);
const regionalControlTitle = useRegionalControlTitle();
const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
return (
<Flex w="full" h="full" flexDir="column" gap={2}>
<QueueControls />
<Flex w="full" h="full" position="relative">
<Box position="absolute" top={0} left={0} right={0} bottom={0}>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<Flex gap={2} flexDirection="column" h="full" w="full">
{isSDXL ? <SDXLPrompts /> : <Prompts />}
<Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
<TabList>
<Tab>{t('parameters.globalSettings')}</Tab>
<Tab>{regionalControlTitle}</Tab>
</TabList>
<TabPanels w="full" h="full">
<TabPanel>
<Flex gap={2} flexDirection="column" h="full" w="full">
<ImageSettingsAccordion />
<GenerationSettingsAccordion />
{activeTabName !== 'txt2img' && <ControlSettingsAccordion />}
{activeTabName === 'unifiedCanvas' && <CompositingSettingsAccordion />}
{isSDXL && <RefinerSettingsAccordion />}
<AdvancedSettingsAccordion />
</Flex>
</TabPanel>
<TabPanel>
<RegionalPromptsPanelContent />
</TabPanel>
</TabPanels>
</Tabs>
</Flex>
</OverlayScrollbarsComponent>
</Box>
</Flex>
</Flex>
);
};
export default memo(ParametersPanelTextToImage);

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

@ -1,7 +1,7 @@
import { Box } from '@invoke-ai/ui-library';
import { Box, Flex } from '@invoke-ai/ui-library';
import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay';
import InitialImageDisplay from 'features/parameters/components/ImageToImage/InitialImageDisplay';
import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
import TextToImageTabMain from 'features/ui/components/tabs/TextToImageTab';
import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
import type { CSSProperties } from 'react';
import { memo, useCallback, useRef } from 'react';
@ -42,7 +42,11 @@ const ImageToImageTab = () => {
</Panel>
<ResizeHandle orientation="vertical" onDoubleClick={handleDoubleClickHandle} />
<Panel id="imageTab.content.selectedImage" order={1} defaultSize={50} minSize={25}>
<TextToImageTabMain />
<Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
<Flex w="full" h="full">
<CurrentImageDisplay />
</Flex>
</Box>
</Panel>
</PanelGroup>
</Box>

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

@ -10,7 +10,7 @@ const TextToImageTab = () => {
const regionalControlTitle = useRegionalControlTitle();
return (
<Box position="relative" w="full" h="full" p={2} borderRadius="base">
<Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
<Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
<TabList>
<Tab>{t('common.viewer')}</Tab>