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

chore(ui): lint

Browse Source
This commit is contained in:
psychedelicious 2023-03-12 20:12:02 +11:00
parent ee6df5852a
commit 727f1638d7
6 changed files with 305 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/app/ThemeLocaleProvider.tsx
View File

@ -1,4 +1,4 @@
import { ChakraProvider, extendTheme, useColorMode } from '@chakra-ui/react'; import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { ReactNode, useEffect } from 'react'; import { ReactNode, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { theme as invokeAITheme } from 'theme/theme'; import { theme as invokeAITheme } from 'theme/theme';

5
invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -72,10 +72,7 @@ export default function CurrentImagePreview() {
maxHeight: APP_METADATA_HEIGHT, maxHeight: APP_METADATA_HEIGHT,
}} }}
> >
<ImageMetadataViewer <ImageMetadataViewer image={imageToDisplay} />
image={imageToDisplay}
styleClass="current-image-metadata"
/>
</Box> </Box>
)} )}
</Flex> </Flex>

612
invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
View File

@ -45,7 +45,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCopy } from 'react-icons/fa'; import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { APP_METADATA_HEIGHT } from 'theme/util/constants';
type MetadataItemProps = { type MetadataItemProps = {
isLink?: boolean; isLink?: boolean;
@ -115,7 +114,6 @@ const MetadataItem = ({
type ImageMetadataViewerProps = { type ImageMetadataViewerProps = {
image: InvokeAI.Image; image: InvokeAI.Image;
styleClass?: string;
}; };
// TODO: I don't know if this is needed. // TODO: I don't know if this is needed.
@ -130,334 +128,328 @@ const memoEqualityCheck = (
* Image metadata viewer overlays currently selected image and provides * Image metadata viewer overlays currently selected image and provides
* access to any of its metadata for use in processing. * access to any of its metadata for use in processing.
*/ */
const ImageMetadataViewer = memo( const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
({ image, styleClass }: ImageMetadataViewerProps) => { const dispatch = useAppDispatch();
const dispatch = useAppDispatch();
const setBothPrompts = useSetBothPrompts(); const setBothPrompts = useSetBothPrompts();
useHotkeys('esc', () => { useHotkeys('esc', () => {
dispatch(setShouldShowImageDetails(false)); dispatch(setShouldShowImageDetails(false));
}); });
const metadata = image?.metadata?.image || {}; const metadata = image?.metadata?.image || {};
const dreamPrompt = image?.dreamPrompt; const dreamPrompt = image?.dreamPrompt;
const { const {
cfg_scale, cfg_scale,
fit, fit,
height, height,
hires_fix, hires_fix,
init_image_path, init_image_path,
mask_image_path, mask_image_path,
orig_path, orig_path,
perlin, perlin,
postprocessing, postprocessing,
prompt, prompt,
sampler, sampler,
seamless, seamless,
seed, seed,
steps, steps,
strength, strength,
threshold, threshold,
type, type,
variations, variations,
width, width,
} = metadata; } = metadata;
const { t } = useTranslation(); const { t } = useTranslation();
const metadataJSON = JSON.stringify(image.metadata, null, 2); const metadataJSON = JSON.stringify(image.metadata, null, 2);
return ( return (
<Flex <Flex
sx={{ sx={{
padding: 4, padding: 4,
gap: 1, gap: 1,
flexDirection: 'column', flexDirection: 'column',
width: 'full', width: 'full',
height: 'full', height: 'full',
backdropFilter: 'blur(20px)', backdropFilter: 'blur(20px)',
bg: 'whiteAlpha.600', bg: 'whiteAlpha.600',
_dark: { _dark: {
bg: 'blackAlpha.600', bg: 'blackAlpha.600',
}, },
}} }}
> >
<Flex gap={2}> <Flex gap={2}>
<Text fontWeight="semibold">File:</Text> <Text fontWeight="semibold">File:</Text>
<Link href={image.url} isExternal maxW="calc(100% - 3rem)"> <Link href={image.url} isExternal maxW="calc(100% - 3rem)">
{image.url.length > 64 {image.url.length > 64
? image.url.substring(0, 64).concat('...') ? image.url.substring(0, 64).concat('...')
: image.url} : image.url}
<ExternalLinkIcon mx="2px" /> <ExternalLinkIcon mx="2px" />
</Link> </Link>
</Flex> </Flex>
{Object.keys(metadata).length > 0 ? ( {Object.keys(metadata).length > 0 ? (
<> <>
{type && <MetadataItem label="Generation type" value={type} />} {type && <MetadataItem label="Generation type" value={type} />}
{image.metadata?.model_weights && ( {image.metadata?.model_weights && (
<MetadataItem <MetadataItem label="Model" value={image.metadata.model_weights} />
label="Model" )}
value={image.metadata.model_weights} {['esrgan', 'gfpgan'].includes(type) && (
/> <MetadataItem label="Original image" value={orig_path} />
)} )}
{['esrgan', 'gfpgan'].includes(type) && ( {prompt && (
<MetadataItem label="Original image" value={orig_path} /> <MetadataItem
)} label="Prompt"
{prompt && ( labelPosition="top"
<MetadataItem value={
label="Prompt" typeof prompt === 'string' ? prompt : promptToString(prompt)
labelPosition="top" }
value={ onClick={() => setBothPrompts(prompt)}
typeof prompt === 'string' ? prompt : promptToString(prompt) />
} )}
onClick={() => setBothPrompts(prompt)} {seed !== undefined && (
/> <MetadataItem
)} label="Seed"
{seed !== undefined && ( value={seed}
<MetadataItem onClick={() => dispatch(setSeed(seed))}
label="Seed" />
value={seed} )}
onClick={() => dispatch(setSeed(seed))} {threshold !== undefined && (
/> <MetadataItem
)} label="Noise Threshold"
{threshold !== undefined && ( value={threshold}
<MetadataItem onClick={() => dispatch(setThreshold(threshold))}
label="Noise Threshold" />
value={threshold} )}
onClick={() => dispatch(setThreshold(threshold))} {perlin !== undefined && (
/> <MetadataItem
)} label="Perlin Noise"
{perlin !== undefined && ( value={perlin}
<MetadataItem onClick={() => dispatch(setPerlin(perlin))}
label="Perlin Noise" />
value={perlin} )}
onClick={() => dispatch(setPerlin(perlin))} {sampler && (
/> <MetadataItem
)} label="Sampler"
{sampler && ( value={sampler}
<MetadataItem onClick={() => dispatch(setSampler(sampler))}
label="Sampler" />
value={sampler} )}
onClick={() => dispatch(setSampler(sampler))} {steps && (
/> <MetadataItem
)} label="Steps"
{steps && ( value={steps}
<MetadataItem onClick={() => dispatch(setSteps(steps))}
label="Steps" />
value={steps} )}
onClick={() => dispatch(setSteps(steps))} {cfg_scale !== undefined && (
/> <MetadataItem
)} label="CFG scale"
{cfg_scale !== undefined && ( value={cfg_scale}
<MetadataItem onClick={() => dispatch(setCfgScale(cfg_scale))}
label="CFG scale" />
value={cfg_scale} )}
onClick={() => dispatch(setCfgScale(cfg_scale))} {variations && variations.length > 0 && (
/> <MetadataItem
)} label="Seed-weight pairs"
{variations && variations.length > 0 && ( value={seedWeightsToString(variations)}
<MetadataItem onClick={() =>
label="Seed-weight pairs" dispatch(setSeedWeights(seedWeightsToString(variations)))
value={seedWeightsToString(variations)} }
onClick={() => />
dispatch(setSeedWeights(seedWeightsToString(variations))) )}
} {seamless && (
/> <MetadataItem
)} label="Seamless"
{seamless && ( value={seamless}
<MetadataItem onClick={() => dispatch(setSeamless(seamless))}
label="Seamless" />
value={seamless} )}
onClick={() => dispatch(setSeamless(seamless))} {hires_fix && (
/> <MetadataItem
)} label="High Resolution Optimization"
{hires_fix && ( value={hires_fix}
<MetadataItem onClick={() => dispatch(setHiresFix(hires_fix))}
label="High Resolution Optimization" />
value={hires_fix} )}
onClick={() => dispatch(setHiresFix(hires_fix))} {width && (
/> <MetadataItem
)} label="Width"
{width && ( value={width}
<MetadataItem onClick={() => dispatch(setWidth(width))}
label="Width" />
value={width} )}
onClick={() => dispatch(setWidth(width))} {height && (
/> <MetadataItem
)} label="Height"
{height && ( value={height}
<MetadataItem onClick={() => dispatch(setHeight(height))}
label="Height" />
value={height} )}
onClick={() => dispatch(setHeight(height))} {init_image_path && (
/> <MetadataItem
)} label="Initial image"
{init_image_path && ( value={init_image_path}
<MetadataItem isLink
label="Initial image" onClick={() => dispatch(setInitialImage(init_image_path))}
value={init_image_path} />
isLink )}
onClick={() => dispatch(setInitialImage(init_image_path))} {mask_image_path && (
/> <MetadataItem
)} label="Mask image"
{mask_image_path && ( value={mask_image_path}
<MetadataItem isLink
label="Mask image" onClick={() => dispatch(setMaskPath(mask_image_path))}
value={mask_image_path} />
isLink )}
onClick={() => dispatch(setMaskPath(mask_image_path))} {type === 'img2img' && strength && (
/> <MetadataItem
)} label="Image to image strength"
{type === 'img2img' && strength && ( value={strength}
<MetadataItem onClick={() => dispatch(setImg2imgStrength(strength))}
label="Image to image strength" />
value={strength} )}
onClick={() => dispatch(setImg2imgStrength(strength))} {fit && (
/> <MetadataItem
)} label="Image to image fit"
{fit && ( value={fit}
<MetadataItem onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
label="Image to image fit" />
value={fit} )}
onClick={() => dispatch(setShouldFitToWidthHeight(fit))} {postprocessing && postprocessing.length > 0 && (
/> <>
)} <Heading size="sm">Postprocessing</Heading>
{postprocessing && postprocessing.length > 0 && ( {postprocessing.map(
<> (
<Heading size="sm">Postprocessing</Heading> postprocess: InvokeAI.PostProcessedImageMetadata,
{postprocessing.map( i: number
( ) => {
postprocess: InvokeAI.PostProcessedImageMetadata, if (postprocess.type === 'esrgan') {
i: number const { scale, strength, denoise_str } = postprocess;
) => { return (
if (postprocess.type === 'esrgan') { <Flex key={i} pl={8} gap={1} direction="column">
const { scale, strength, denoise_str } = postprocess; <Text size="md">{`${i + 1}: Upscale (ESRGAN)`}</Text>
return ( <MetadataItem
<Flex key={i} pl={8} gap={1} direction="column"> label="Scale"
<Text size="md">{`${i + 1}: Upscale (ESRGAN)`}</Text> value={scale}
onClick={() => dispatch(setUpscalingLevel(scale))}
/>
<MetadataItem
label="Strength"
value={strength}
onClick={() =>
dispatch(setUpscalingStrength(strength))
}
/>
{denoise_str !== undefined && (
<MetadataItem <MetadataItem
label="Scale" label="Denoising strength"
value={scale} value={denoise_str}
onClick={() => dispatch(setUpscalingLevel(scale))}
/>
<MetadataItem
label="Strength"
value={strength}
onClick={() => onClick={() =>
dispatch(setUpscalingStrength(strength)) dispatch(setUpscalingDenoising(denoise_str))
} }
/> />
{denoise_str !== undefined && ( )}
<MetadataItem </Flex>
label="Denoising strength" );
value={denoise_str} } else if (postprocess.type === 'gfpgan') {
onClick={() => const { strength } = postprocess;
dispatch(setUpscalingDenoising(denoise_str)) return (
} <Flex key={i} pl={8} gap={1} direction="column">
/> <Text size="md">{`${
)} i + 1
</Flex> }: Face restoration (GFPGAN)`}</Text>
);
} else if (postprocess.type === 'gfpgan') {
const { strength } = postprocess;
return (
<Flex key={i} pl={8} gap={1} direction="column">
<Text size="md">{`${
i + 1
}: Face restoration (GFPGAN)`}</Text>
<MetadataItem <MetadataItem
label="Strength" label="Strength"
value={strength} value={strength}
onClick={() => { onClick={() => {
dispatch(setFacetoolStrength(strength)); dispatch(setFacetoolStrength(strength));
dispatch(setFacetoolType('gfpgan')); dispatch(setFacetoolType('gfpgan'));
}} }}
/> />
</Flex> </Flex>
); );
} else if (postprocess.type === 'codeformer') { } else if (postprocess.type === 'codeformer') {
const { strength, fidelity } = postprocess; const { strength, fidelity } = postprocess;
return ( return (
<Flex key={i} pl={8} gap={1} direction="column"> <Flex key={i} pl={8} gap={1} direction="column">
<Text size="md">{`${ <Text size="md">{`${
i + 1 i + 1
}: Face restoration (Codeformer)`}</Text> }: Face restoration (Codeformer)`}</Text>
<MetadataItem
label="Strength"
value={strength}
onClick={() => {
dispatch(setFacetoolStrength(strength));
dispatch(setFacetoolType('codeformer'));
}}
/>
{fidelity && (
<MetadataItem <MetadataItem
label="Strength" label="Fidelity"
value={strength} value={fidelity}
onClick={() => { onClick={() => {
dispatch(setFacetoolStrength(strength)); dispatch(setCodeformerFidelity(fidelity));
dispatch(setFacetoolType('codeformer')); dispatch(setFacetoolType('codeformer'));
}} }}
/> />
{fidelity && ( )}
<MetadataItem </Flex>
label="Fidelity" );
value={fidelity}
onClick={() => {
dispatch(setCodeformerFidelity(fidelity));
dispatch(setFacetoolType('codeformer'));
}}
/>
)}
</Flex>
);
}
} }
)} }
</> )}
)} </>
{dreamPrompt && ( )}
<MetadataItem withCopy label="Dream Prompt" value={dreamPrompt} /> {dreamPrompt && (
)} <MetadataItem withCopy label="Dream Prompt" value={dreamPrompt} />
<Flex gap={2} direction="column"> )}
<Flex gap={2}> <Flex gap={2} direction="column">
<Tooltip label="Copy metadata JSON"> <Flex gap={2}>
<IconButton <Tooltip label="Copy metadata JSON">
aria-label={t('accessibility.copyMetadataJson')} <IconButton
icon={<FaCopy />} aria-label={t('accessibility.copyMetadataJson')}
size="xs" icon={<FaCopy />}
variant="ghost" size="xs"
fontSize={14} variant="ghost"
onClick={() => navigator.clipboard.writeText(metadataJSON)} fontSize={14}
/> onClick={() => navigator.clipboard.writeText(metadataJSON)}
</Tooltip> />
<Text fontWeight="semibold">Metadata JSON:</Text> </Tooltip>
</Flex> <Text fontWeight="semibold">Metadata JSON:</Text>
<Box
sx={{
mt: 0,
mr: 2,
mb: 4,
ml: 2,
padding: 4,
borderRadius: 'base',
overflowX: 'scroll',
wordBreak: 'break-all',
bg: 'whiteAlpha.500',
_dark: { bg: 'blackAlpha.500' },
}}
>
<pre>{metadataJSON}</pre>
</Box>
</Flex> </Flex>
</> <Box
) : ( sx={{
<Center width="100%" pt={10}> mt: 0,
<Text fontSize="lg" fontWeight="semibold"> mr: 2,
No metadata available mb: 4,
</Text> ml: 2,
</Center> padding: 4,
)} borderRadius: 'base',
</Flex> overflowX: 'scroll',
); wordBreak: 'break-all',
}, bg: 'whiteAlpha.500',
memoEqualityCheck _dark: { bg: 'blackAlpha.500' },
); }}
>
<pre>{metadataJSON}</pre>
</Box>
</Flex>
</>
) : (
<Center width="100%" pt={10}>
<Text fontSize="lg" fontWeight="semibold">
No metadata available
</Text>
</Center>
)}
</Flex>
);
}, memoEqualityCheck);
ImageMetadataViewer.displayName = 'ImageMetadataViewer'; ImageMetadataViewer.displayName = 'ImageMetadataViewer';

6
invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx
View File

@ -1,4 +1,4 @@
import { Box, chakra, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/storeHooks';
@ -12,7 +12,6 @@ import { uiSelector } from 'features/ui/store/uiSelectors';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { BiExit } from 'react-icons/bi'; import { BiExit } from 'react-icons/bi';
import { TransformWrapper } from 'react-zoom-pan-pinch'; import { TransformWrapper } from 'react-zoom-pan-pinch';
import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants'; import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants';
@ -38,11 +37,8 @@ export const lightboxSelector = createSelector(
} }
); );
const ChakraMotionBox = chakra(motion.div);
export default function Lightbox() { export default function Lightbox() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation();
const isLightBoxOpen = useAppSelector( const isLightBoxOpen = useAppSelector(
(state: RootState) => state.lightbox.isLightboxOpen (state: RootState) => state.lightbox.isLightboxOpen
); );

1
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -14,7 +14,6 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import NodesWIP from 'common/components/WorkInProgress/NodesWIP'; import NodesWIP from 'common/components/WorkInProgress/NodesWIP';
import { PostProcessingWIP } from 'common/components/WorkInProgress/PostProcessingWIP'; import { PostProcessingWIP } from 'common/components/WorkInProgress/PostProcessingWIP';
import TrainingWIP from 'common/components/WorkInProgress/Training'; import TrainingWIP from 'common/components/WorkInProgress/Training';
import Lightbox from 'features/lightbox/components/Lightbox';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice'; import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice'; import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';

1
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx
View File

@ -1,5 +1,4 @@
import { Flex } from '@chakra-ui/layout'; import { Flex } from '@chakra-ui/layout';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';