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): init image tweaks

Browse Source
This commit is contained in:
psychedelicious 2023-04-30 15:40:47 +10:00
parent deae5fbaec
commit c8fe12cd91
4 changed files with 10 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
invokeai/frontend/web/src/common/components/ImageToImageOverlay.tsx
View File

@ -1,32 +1,11 @@
import { Badge, Box, ButtonGroup, Flex } from '@chakra-ui/react'; import { Badge, Box, Flex } from '@chakra-ui/react';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { clearInitialImage } from 'features/parameters/store/generationSlice';
import { useCallback } from 'react';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaUndo, FaUpload } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
import { Image } from 'app/types/invokeai'; import { Image } from 'app/types/invokeai';
type ImageToImageOverlayProps = { type ImageToImageOverlayProps = {
setIsLoaded: (isLoaded: boolean) => void;
image: Image; image: Image;
}; };
const ImageToImageOverlay = ({ const ImageToImageOverlay = ({ image }: ImageToImageOverlayProps) => {
setIsLoaded,
image,
}: ImageToImageOverlayProps) => {
const isImageToImageEnabled = useAppSelector(
(state: RootState) => state.generation.isImageToImageEnabled
);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleResetInitialImage = useCallback(() => {
dispatch(clearInitialImage());
setIsLoaded(false);
}, [dispatch, setIsLoaded]);
return ( return (
<Box <Box
sx={{ sx={{

25
invokeai/frontend/web/src/common/components/ImageToImageSettingsHeader.tsx
View File

@ -1,34 +1,13 @@
import { import { ButtonGroup, Flex, Spacer, Text } from '@chakra-ui/react';
Box,
ButtonGroup,
Collapse,
Flex,
Heading,
HStack,
Image,
Spacer,
Text,
useDisclosure,
VStack,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import IAIButton from 'common/components/IAIButton';
import ImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageFit';
import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaUndo, FaUpload } from 'react-icons/fa'; import { FaUndo, FaUpload } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { RootState } from 'app/store/store';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { clearInitialImage } from 'features/parameters/store/generationSlice'; import { clearInitialImage } from 'features/parameters/store/generationSlice';
const ImageToImageSettingsHeader = () => { const ImageToImageSettingsHeader = () => {
const isImageToImageEnabled = useAppSelector(
(state: RootState) => state.generation.isImageToImageEnabled
);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();

11
invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview.tsx
View File

@ -17,7 +17,7 @@ import { ImageType } from 'services/api';
import ImageToImageOverlay from 'common/components/ImageToImageOverlay'; import ImageToImageOverlay from 'common/components/ImageToImageOverlay';
import { initialImageSelector } from 'features/parameters/store/generationSelectors'; import { initialImageSelector } from 'features/parameters/store/generationSelectors';
const initialImagePreviewSelector = createSelector( const selector = createSelector(
[initialImageSelector], [initialImageSelector],
(initialImage) => { (initialImage) => {
return { return {
@ -31,7 +31,7 @@ const InitialImagePreview = () => {
const isImageToImageEnabled = useAppSelector( const isImageToImageEnabled = useAppSelector(
(state: RootState) => state.generation.isImageToImageEnabled (state: RootState) => state.generation.isImageToImageEnabled
); );
const { initialImage } = useAppSelector(initialImagePreviewSelector); const { initialImage } = useAppSelector(selector);
const { getUrl } = useGetUrl(); const { getUrl } = useGetUrl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
@ -113,12 +113,7 @@ const InitialImagePreview = () => {
</Flex> </Flex>
} }
/> />
{isLoaded && ( {isLoaded && <ImageToImageOverlay image={initialImage} />}
<ImageToImageOverlay
setIsLoaded={setIsLoaded}
image={initialImage}
/>
)}
</Box> </Box>
)} )}
{!initialImage?.url && <SelectImagePlaceholder />} {!initialImage?.url && <SelectImagePlaceholder />}

6
invokeai/frontend/web/src/features/parameters/components/AnimatedImageToImagePanel.tsx
View File

@ -15,9 +15,9 @@ const AnimatedImageToImagePanel = () => {
<AnimatePresence> <AnimatePresence>
{isImageToImageEnabled && ( {isImageToImageEnabled && (
<motion.div <motion.div
initial={{ opacity: 0, scaleX: 0, width: 0 }} initial={{ opacity: 0, scale: 0, width: 0 }}
animate={{ opacity: 1, scaleX: 1, width: '28rem' }} animate={{ opacity: 1, scale: 1, width: '28rem' }}
exit={{ opacity: 0, scaleX: 0, width: 0 }} exit={{ opacity: 0, scale: 0, width: 0 }}
transition={{ type: 'spring', bounce: 0, duration: 0.35 }} transition={{ type: 'spring', bounce: 0, duration: 0.35 }}
> >
<Box sx={{ h: 'full', w: 'full', pl: 4 }}> <Box sx={{ h: 'full', w: 'full', pl: 4 }}>