Merge branch 'main' into set-timestep-mps-fix

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

@@ -148,7 +148,7 @@ const ParamPositiveConditioning = () => {
         <Box
           sx={{
             position: 'absolute',
-            top: shouldPinParametersPanel ? 6 : 0,
+            top: shouldPinParametersPanel ? 5 : 0,
             insetInlineEnd: 0,
           }}
         >

invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx

@@ -0,0 +1,17 @@
+import { Flex } from '@chakra-ui/react';
+import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
+import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+
+export default function ParamPromptArea() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <ParamPositiveConditioning />
+      <ParamNegativeConditioning />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx

@@ -0,0 +1,43 @@
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaLink } from 'react-icons/fa';
+import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
+
+export default function ParamSDXLConcatButton() {
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
+  const shouldPinParametersPanel = useAppSelector(
+    (state: RootState) => state.ui.shouldPinParametersPanel
+  );
+
+  const dispatch = useAppDispatch();
+
+  const handleShouldConcatPromptChange = () => {
+    dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt));
+  };
+
+  return (
+    <IAIIconButton
+      aria-label="Concat"
+      tooltip="Concatenates Basic Prompt with Style (Recommended)"
+      variant="outline"
+      isChecked={shouldConcatSDXLStylePrompt}
+      onClick={handleShouldConcatPromptChange}
+      icon={<FaLink />}
+      size="xs"
+      sx={{
+        position: 'absolute',
+        insetInlineEnd: 1,
+        top: shouldPinParametersPanel ? 12 : 20,
+        border: 'none',
+        color: shouldConcatSDXLStylePrompt ? 'accent.500' : 'base.500',
+        _hover: {
+          bg: 'none',
+        },
+      }}
+    ></IAIIconButton>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx

@@ -1,33 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISwitch from 'common/components/IAISwitch';
-import { ChangeEvent } from 'react';
-import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
-
-export default function ParamSDXLConcatPrompt() {
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
-  );
-
-  const dispatch = useAppDispatch();
-
-  const handleShouldConcatPromptChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(setShouldConcatSDXLStylePrompt(e.target.checked));
-  };
-
-  return (
-    <Box
-      sx={{
-        px: 2,
-      }}
-    >
-      <IAISwitch
-        label="Concat Style Prompt"
-        tooltip="Concatenates Basic Prompt with Style (Recommended)"
-        isChecked={shouldConcatSDXLStylePrompt}
-        onChange={handleShouldConcatPromptChange}
-      />
-    </Box>
-  );
-}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx

@@ -0,0 +1,61 @@
+import { Box, Flex } from '@chakra-ui/react';
+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';
+import SDXLConcatLink from './SDXLConcatLink';
+
+export default function ParamSDXLPromptArea() {
+  const shouldPinParametersPanel = useAppSelector(
+    (state: RootState) => state.ui.shouldPinParametersPanel
+  );
+
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <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 />
+      <ParamNegativeConditioning />
+      <ParamSDXLNegativeStyleConditioning />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx

@@ -0,0 +1,109 @@
+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
+      sx={{
+        h: 0.5,
+        placeContent: 'center',
+        gap: 2,
+        flexDirection: 'column',
+      }}
+    >
+      <Box
+        as={motion.div}
+        initial={{
+          scaleX: 0,
+          borderWidth: 0,
+          display: 'none',
+        }}
+        animate={{
+          display: ['block', 'block', 'block', 'none'],
+          scaleX: [0, 0.25, 0.5, 1],
+          borderWidth: [0, 3, 3, 0],
+          transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
+        }}
+        sx={{
+          top: '1px',
+          borderTop: 'none',
+          borderColor: 'base.400',
+          zIndex: 2,
+          ...sharedConcatLinkStyle,
+          _dark: {
+            borderColor: 'accent.500',
+          },
+        }}
+      />
+      <Box
+        as={motion.div}
+        initial={{
+          opacity: 0,
+          scale: 0,
+        }}
+        animate={{
+          opacity: [0, 1, 1, 1],
+          scale: [0, 0.75, 1.5, 1],
+          transition: { duration: 0.42, times: [0, 0.25, 0.5, 1] },
+        }}
+        exit={{
+          opacity: 0,
+          scale: 0,
+        }}
+        sx={{
+          zIndex: 3,
+          position: 'absolute',
+          left: '48%',
+          top: '3px',
+          p: 1,
+          borderRadius: 4,
+          bg: 'accent.400',
+          color: 'base.50',
+          _dark: {
+            bg: 'accent.500',
+          },
+        }}
+      >
+        <FaLink size={12} />
+      </Box>
+      <Box
+        as={motion.div}
+        initial={{
+          scaleX: 0,
+          borderWidth: 0,
+          display: 'none',
+        }}
+        animate={{
+          display: ['block', 'block', 'block', 'none'],
+          scaleX: [0, 0.25, 0.5, 1],
+          borderWidth: [0, 3, 3, 0],
+          transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
+        }}
+        sx={{
+          top: '17px',
+          borderBottom: 'none',
+          borderColor: 'base.400',
+          ...sharedConcatLinkStyle,
+          _dark: {
+            borderColor: 'accent.500',
+          },
+        }}
+      />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx

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

invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx

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

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx

@@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 
 const ImageToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
+      <ParamPromptArea />
-      <ParamNegativeConditioning />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx

@@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
 import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
 
 const TextToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
+      <ParamPromptArea />
-      <ParamNegativeConditioning />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx

@@ -4,18 +4,16 @@ import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Adv
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
 import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
 
 const UnifiedCanvasParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
+      <ParamPromptArea />
-      <ParamNegativeConditioning />
       <ProcessButtons />
       <UnifiedCanvasCoreParameters />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/theme/components/textarea.ts

@@ -13,6 +13,15 @@ const invokeAI = defineStyle((props) => ({
       var(--invokeai-colors-base-200) 70%,
       var(--invokeai-colors-base-200) 100%)`,
   },
+  _disabled: {
+    '::-webkit-resizer': {
+      backgroundImage: `linear-gradient(135deg,
+        var(--invokeai-colors-base-50) 0%,
+        var(--invokeai-colors-base-50) 70%,
+        var(--invokeai-colors-base-200) 70%,
+        var(--invokeai-colors-base-200) 100%)`,
+    },
+  },
   _dark: {
     '::-webkit-resizer': {
       backgroundImage: `linear-gradient(135deg,
@@ -21,6 +30,15 @@ const invokeAI = defineStyle((props) => ({
         var(--invokeai-colors-base-800) 70%,
         var(--invokeai-colors-base-800) 100%)`,
     },
+    _disabled: {
+      '::-webkit-resizer': {
+        backgroundImage: `linear-gradient(135deg,
+          var(--invokeai-colors-base-900) 0%,
+          var(--invokeai-colors-base-900) 70%,
+          var(--invokeai-colors-base-800) 70%,
+          var(--invokeai-colors-base-800) 100%)`,
+      },
+    },
   },
 }));