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 { useAppSelector } from 'app/store/storeHooks';
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';
import { AnimatePresence } from 'framer-motion';
import ParamSDXLConcatButton from './ParamSDXLConcatButton'; import ParamSDXLConcatButton from './ParamSDXLConcatButton';
import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
@ -24,28 +25,32 @@ export default function ParamSDXLPromptArea() {
gap: 2, gap: 2,
}} }}
> >
{shouldConcatSDXLStylePrompt && ( <AnimatePresence>
<Box {shouldConcatSDXLStylePrompt && (
sx={{ <Box
position: 'absolute', sx={{
w: 'full', position: 'absolute',
top: shouldPinParametersPanel ? '119px' : '175px', w: 'full',
}} top: shouldPinParametersPanel ? '119px' : '175px',
> }}
<SDXLConcatLink /> >
</Box> <SDXLConcatLink />
)} </Box>
{shouldConcatSDXLStylePrompt && ( )}
<Box </AnimatePresence>
sx={{ <AnimatePresence>
position: 'absolute', {shouldConcatSDXLStylePrompt && (
w: 'full', <Box
top: shouldPinParametersPanel ? '263px' : '319px', sx={{
}} position: 'absolute',
> w: 'full',
<SDXLConcatLink /> top: shouldPinParametersPanel ? '263px' : '319px',
</Box> }}
)} >
<SDXLConcatLink />
</Box>
)}
</AnimatePresence>
<ParamPositiveConditioning /> <ParamPositiveConditioning />
<ParamSDXLConcatButton /> <ParamSDXLConcatButton />
<ParamSDXLPositiveStyleConditioning /> <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 { Box, Flex } from '@chakra-ui/react';
import { CSSObject } from '@emotion/react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { FaLink } from 'react-icons/fa'; 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() { export default function SDXLConcatLink() {
return ( return (
<Flex <Flex
@ -16,29 +30,23 @@ export default function SDXLConcatLink() {
as={motion.div} as={motion.div}
initial={{ initial={{
scaleX: 0, scaleX: 0,
borderRadius: 0,
borderWidth: 0, borderWidth: 0,
display: 'none', display: 'none',
}} }}
animate={{ animate={{
display: ['block', 'block', 'block', 'none'], display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1], scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0], 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={{ sx={{
position: 'absolute',
top: '1px', top: '1px',
bg: 'none',
w: 'full',
minH: 2,
borderTop: 'none', borderTop: 'none',
borderTopRadius: 0, borderColor: 'base.400',
borderColor: 'accent.300',
zIndex: 2, zIndex: 2,
...sharedConcatLinkStyle,
_dark: { _dark: {
borderColor: 'accent.600', borderColor: 'accent.500',
}, },
}} }}
/> />
@ -47,13 +55,15 @@ export default function SDXLConcatLink() {
initial={{ initial={{
opacity: 0, opacity: 0,
scale: 0, scale: 0,
rotate: 0,
}} }}
animate={{ animate={{
rotate: 360,
opacity: [0, 1, 1, 1], opacity: [0, 1, 1, 1],
scale: [0, 0.75, 1.5, 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={{ sx={{
zIndex: 3, zIndex: 3,
@ -74,29 +84,22 @@ export default function SDXLConcatLink() {
as={motion.div} as={motion.div}
initial={{ initial={{
scaleX: 0, scaleX: 0,
borderRadius: 0,
borderWidth: 0, borderWidth: 0,
display: 'none', display: 'none',
}} }}
animate={{ animate={{
display: ['block', 'block', 'block', 'none'], display: ['block', 'block', 'block', 'none'],
scaleX: [0, 0.25, 0.5, 1], scaleX: [0, 0.25, 0.5, 1],
borderRadius: [0, 0, 0, 3],
borderWidth: [0, 3, 3, 0], 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={{ sx={{
position: 'absolute',
top: '17px', top: '17px',
bg: 'none',
w: 'full',
minH: 2,
borderBottom: 'none', borderBottom: 'none',
borderBottomRadius: 0, borderColor: 'base.400',
borderColor: 'accent.300', ...sharedConcatLinkStyle,
zIndex: 2,
_dark: { _dark: {
borderColor: 'accent.600', borderColor: 'accent.500',
}, },
}} }}
/> />