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

fix: Improve Styling of SDXL Prompt Area

Browse Source
This commit is contained in:
blessedcoolant 2023-07-27 05:28:04 +12:00 committed by Kent Keirsey
parent 3bd9c27a79
commit 0420d75d2b
4 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx
View File

@ -19,11 +19,7 @@ export default function ParamSDXLConcatPrompt() {
return ( return (
<Box <Box
sx={{ sx={{
px: 4, px: 2,
py: 2,
borderRadius: 4,
bg: 'base.100',
_dark: { bg: 'base.800' },
}} }}
> >
<IAISwitch <IAISwitch

22
invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
View File

@ -1,3 +1,4 @@
import { Flex } from '@chakra-ui/react';
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
@ -12,11 +13,22 @@ import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParamete
const SDXLImageToImageTabParameters = () => { const SDXLImageToImageTabParameters = () => {
return ( return (
<> <>
<ParamPositiveConditioning /> <Flex
<ParamSDXLPositiveStyleConditioning /> sx={{
<ParamNegativeConditioning /> flexDirection: 'column',
<ParamSDXLNegativeStyleConditioning /> gap: 2,
<ParamSDXLConcatPrompt /> p: 2,
borderRadius: 4,
bg: 'base.100',
_dark: { bg: 'base.850' },
}}
>
<ParamPositiveConditioning />
<ParamSDXLPositiveStyleConditioning />
<ParamNegativeConditioning />
<ParamSDXLNegativeStyleConditioning />
<ParamSDXLConcatPrompt />
</Flex>
<ProcessButtons /> <ProcessButtons />
<SDXLImageToImageTabCoreParameters /> <SDXLImageToImageTabCoreParameters />
<ParamSDXLRefinerCollapse /> <ParamSDXLRefinerCollapse />

22
invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
View File

@ -1,3 +1,4 @@
import { Flex } from '@chakra-ui/react';
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
@ -12,11 +13,22 @@ import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
const SDXLTextToImageTabParameters = () => { const SDXLTextToImageTabParameters = () => {
return ( return (
<> <>
<ParamPositiveConditioning /> <Flex
<ParamSDXLPositiveStyleConditioning /> sx={{
<ParamNegativeConditioning /> flexDirection: 'column',
<ParamSDXLNegativeStyleConditioning /> gap: 2,
<ParamSDXLConcatPrompt /> p: 2,
borderRadius: 4,
bg: 'base.100',
_dark: { bg: 'base.850' },
}}
>
<ParamPositiveConditioning />
<ParamSDXLPositiveStyleConditioning />
<ParamNegativeConditioning />
<ParamSDXLNegativeStyleConditioning />
<ParamSDXLConcatPrompt />
</Flex>
<ProcessButtons /> <ProcessButtons />
<TextToImageTabCoreParameters /> <TextToImageTabCoreParameters />
<ParamSDXLRefinerCollapse /> <ParamSDXLRefinerCollapse />

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

@ -1,7 +1,7 @@
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import TextToImageSDXLTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters'; import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
import { memo } from 'react'; import { memo } from 'react';
import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
import TextToImageTabMain from './TextToImageTabMain'; import TextToImageTabMain from './TextToImageTabMain';
@ -13,7 +13,7 @@ const TextToImageTab = () => {
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}> <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
<ParametersPinnedWrapper> <ParametersPinnedWrapper>
{model && model.base_model === 'sdxl' ? ( {model && model.base_model === 'sdxl' ? (
<TextToImageSDXLTabParameters /> <SDXLTextToImageTabParameters />
) : ( ) : (
<TextToImageTabParameters /> <TextToImageTabParameters />
)} )}