chore(ui): lint

invokeai/frontend/web/src/app/ThemeLocaleProvider.tsx

@@ -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 { useTranslation } from 'react-i18next';
 import { theme as invokeAITheme } from 'theme/theme';

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

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

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

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

invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx

@@ -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 { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
@@ -12,7 +12,6 @@ import { uiSelector } from 'features/ui/store/uiSelectors';
 import { AnimatePresence, motion } from 'framer-motion';
 import { isEqual } from 'lodash';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
 import { BiExit } from 'react-icons/bi';
 import { TransformWrapper } from 'react-zoom-pan-pinch';
 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() {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation();
   const isLightBoxOpen = useAppSelector(
     (state: RootState) => state.lightbox.isLightboxOpen
   );

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

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

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

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