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: Pulse Animate SDXL Concat Link

Browse Source
This commit is contained in:
blessedcoolant 2023-07-28 20:45:39 +12:00
parent 14c4650801
commit 1df30f7260
2 changed files with 54 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
View File

@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
import { AnimatePresence } from 'framer-motion';
import ParamSDXLConcatButton from './ParamSDXLConcatButton';
import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
@ -24,28 +25,32 @@ export default function ParamSDXLPromptArea() {
gap: 2,
}}
>
{shouldConcatSDXLStylePrompt && (
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '119px' : '175px',
}}
>
<SDXLConcatLink />
</Box>
)}
{shouldConcatSDXLStylePrompt && (
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '263px' : '319px',
}}
>
<SDXLConcatLink />
</Box>
)}
<AnimatePresence>
{shouldConcatSDXLStylePrompt && (
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '119px' : '175px',
}}
>
<SDXLConcatLink />
</Box>
)}
</AnimatePresence>
<AnimatePresence>
{shouldConcatSDXLStylePrompt && (
<Box
sx={{
position: 'absolute',
w: 'full',
top: shouldPinParametersPanel ? '263px' : '319px',
}}
>
<SDXLConcatLink />
</Box>
)}
</AnimatePresence>
<ParamPositiveConditioning />
<ParamSDXLConcatButton />
<ParamSDXLPositiveStyleConditioning />

51
invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
View File

@ -1,7 +1,21 @@
import { Box, Flex } from '@chakra-ui/react';
import { CSSObject } from '@emotion/react';
import { motion } from 'framer-motion';
import { FaLink } from 'react-icons/fa';
const sharedConcatLinkStyle: CSSObject = {
position: 'absolute',
bg: 'none',
w: 'full',
minH: 2,
borderRadius: 0,
borderLeft: 'none',
borderRight: 'none',
zIndex: 2,
maskImage:
'radial-gradient(circle at center, black, black 65%, black 30%, black 15%, transparent)',
};
export default function SDXLConcatLink() {
return (
<Flex
@ -16,29 +30,23 @@ export default function SDXLConcatLink() {
as={motion.div}
initial={{
scaleX: 0,
borderRadius: 0,
borderWidth: 0,
display: 'none',
}}
animate={{
display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
}}
sx={{
position: 'absolute',
top: '1px',
bg: 'none',
w: 'full',
minH: 2,
borderTop: 'none',
borderTopRadius: 0,
borderColor: 'accent.300',
borderColor: 'base.400',
zIndex: 2,
...sharedConcatLinkStyle,
_dark: {
borderColor: 'accent.600',
borderColor: 'accent.500',
},
}}
/>
@ -47,13 +55,15 @@ export default function SDXLConcatLink() {
initial={{
opacity: 0,
scale: 0,
rotate: 0,
}}
animate={{
rotate: 360,
opacity: [0, 1, 1, 1],
scale: [0, 0.75, 1.5, 1],
transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
transition: { duration: 0.42, times: [0, 0.25, 0.5, 1] },
}}
exit={{
opacity: 0,
scale: 0,
}}
sx={{
zIndex: 3,
@ -74,29 +84,22 @@ export default function SDXLConcatLink() {
as={motion.div}
initial={{
scaleX: 0,
borderRadius: 0,
borderWidth: 0,
display: 'none',
}}
animate={{
display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0],
transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
}}
sx={{
position: 'absolute',
top: '17px',
bg: 'none',
w: 'full',
minH: 2,
borderBottom: 'none',
borderBottomRadius: 0,
borderColor: 'accent.300',
zIndex: 2,
borderColor: 'base.400',
...sharedConcatLinkStyle,
_dark: {
borderColor: 'accent.600',
borderColor: 'accent.500',
},
}}
/>