From e46102124e2b9178441a1bb33e5ff0998d2ad82c Mon Sep 17 00:00:00 2001 From: David Regla Date: Sat, 17 Dec 2022 11:49:22 -0600 Subject: [PATCH 1/7] [WebUI] Even off JSX string props Increased consistency and readability by replacing any unnecessary JSX expressions in places where string literals are sufficient --- invokeai/frontend/src/Loading.tsx | 4 +- .../src/common/components/GuideIcon.tsx | 2 +- .../src/common/components/GuidePopover.tsx | 6 +- .../src/common/components/IAISlider.tsx | 8 +-- .../common/components/ImageUploadOverlay.tsx | 6 +- .../common/components/ImageUploaderButton.tsx | 2 +- .../ClearCanvasHistoryButtonModal.tsx | 2 +- .../features/canvas/components/IAICanvas.tsx | 8 +-- .../IAICanvasBoundingBoxOverlay.tsx | 6 +- .../components/IAICanvasMaskCompositer.tsx | 4 +- .../canvas/components/IAICanvasMaskLines.tsx | 2 +- .../components/IAICanvasObjectRenderer.tsx | 4 +- .../components/IAICanvasStagingArea.tsx | 4 +- .../IAICanvasStagingAreaToolbar.tsx | 10 +-- .../components/IAICanvasToolPreview.tsx | 8 +-- .../IAICanvasToolbar/IAICanvasBoundingBox.tsx | 6 +- .../IAICanvasToolbar/IAICanvasMaskOptions.tsx | 4 +- .../IAICanvasSettingsButtonPopover.tsx | 2 +- .../IAICanvasToolChooserOptions.tsx | 9 +-- .../components/CurrentImageButtons.tsx | 10 +-- .../components/CurrentImagePreview.tsx | 2 +- .../gallery/components/DeleteImageModal.tsx | 4 +- .../gallery/components/HoverableImage.tsx | 16 ++--- .../gallery/components/ImageGallery.tsx | 18 ++--- .../ImageMetadataViewer.tsx | 65 +++++++------------ .../AccordionItems/InvokeAccordionItem.tsx | 4 +- .../FaceRestore/FaceRestoreSettings.tsx | 2 +- .../ImageToImage/ImageToImageStrength.tsx | 2 +- .../Output/HiresSettings.tsx | 6 +- .../Output/ImageToImageOutputSettings.tsx | 2 +- .../Output/OutputSettings.tsx | 2 +- .../Output/SeamlessSettings.tsx | 4 +- .../AdvancedParameters/Seed/SeedSettings.tsx | 2 +- .../AdvancedParameters/Seed/ShuffleSeed.tsx | 2 +- .../Variations/GenerateVariations.tsx | 2 +- .../Variations/VariationsSettings.tsx | 2 +- .../components/PromptInput/PromptInput.tsx | 2 +- .../components/ClearTempFolderButtonModal.tsx | 2 +- .../features/system/components/Console.tsx | 12 ++-- .../system/components/LanguagePicker.tsx | 2 +- .../ModelManager/AddCheckpointModel.tsx | 20 +++--- .../ModelManager/AddDiffusersModel.tsx | 14 ++-- .../components/ModelManager/AddModel.tsx | 4 +- .../ModelManager/CheckpointModelEdit.tsx | 16 ++--- .../ModelManager/DiffusersModelEdit.tsx | 12 ++-- .../components/ModelManager/ModelList.tsx | 10 +-- .../components/ModelManager/ModelListItem.tsx | 12 ++-- .../ModelManager/ModelManagerModal.tsx | 6 +- .../components/ModelManager/SearchModels.tsx | 40 ++++++------ .../SettingsModal/SettingsModal.tsx | 6 +- .../features/system/components/SiteHeader.tsx | 12 ++-- .../system/components/ThemeChanger.tsx | 6 +- .../ImageToImage/InitImagePreview.tsx | 6 +- .../ImageToImage/InitialImageOverlay.tsx | 6 +- .../src/features/ui/components/InvokeTabs.tsx | 16 ++--- .../UnifiedCanvasDisplayBeta.tsx | 13 ++-- .../UnifiedCanvasBaseBrushSettings.tsx | 2 +- .../UnifiedCanvasBrushSettings.tsx | 2 +- .../UnifiedCanvasBrushSize.tsx | 2 +- .../UnifiedCanvasClearMask.tsx | 2 +- .../UnifiedCanvasColorPicker.tsx | 2 +- .../UnifiedCanvasMaskBrushSettings.tsx | 2 +- .../UnifiedCanvasMoveSettings.tsx | 2 +- .../UnifiedCanvasSettings.tsx | 2 +- .../UnifiedCanvasToolSettingsBeta.tsx | 2 +- .../UnifiedCanvasProcessingButtons.tsx | 4 +- .../UnifiedCanvasToolSelect.tsx | 4 +- .../UnifiedCanvasToolbarBeta.tsx | 12 ++-- .../UnifiedCanvas/UnifiedCanvasDisplay.tsx | 2 +- 69 files changed, 235 insertions(+), 264 deletions(-) diff --git a/invokeai/frontend/src/Loading.tsx b/invokeai/frontend/src/Loading.tsx index 8e71bb9ac6..066315ecd1 100644 --- a/invokeai/frontend/src/Loading.tsx +++ b/invokeai/frontend/src/Loading.tsx @@ -3,8 +3,8 @@ import { Flex, Spinner } from '@chakra-ui/react'; const Loading = () => { return ( diff --git a/invokeai/frontend/src/common/components/GuideIcon.tsx b/invokeai/frontend/src/common/components/GuideIcon.tsx index 7b78affd19..1816d9f30b 100644 --- a/invokeai/frontend/src/common/components/GuideIcon.tsx +++ b/invokeai/frontend/src/common/components/GuideIcon.tsx @@ -13,7 +13,7 @@ const GuideIcon = forwardRef( ({ feature, icon = MdHelp }: GuideIconProps, ref) => ( - + ) diff --git a/invokeai/frontend/src/common/components/GuidePopover.tsx b/invokeai/frontend/src/common/components/GuidePopover.tsx index b2f9dfe494..ca45343588 100644 --- a/invokeai/frontend/src/common/components/GuidePopover.tsx +++ b/invokeai/frontend/src/common/components/GuidePopover.tsx @@ -29,15 +29,15 @@ const GuidePopover = ({ children, feature }: GuideProps) => { if (!shouldDisplayGuides) return null; return ( - + {children} e.preventDefault()} - cursor={'initial'} + cursor="initial" >
{text}
diff --git a/invokeai/frontend/src/common/components/IAISlider.tsx b/invokeai/frontend/src/common/components/IAISlider.tsx index a4db05e6dc..03f24ccab4 100644 --- a/invokeai/frontend/src/common/components/IAISlider.tsx +++ b/invokeai/frontend/src/common/components/IAISlider.tsx @@ -169,7 +169,7 @@ export default function IAISlider(props: IAIFullSliderProps) { {label} - + } onClick={handleResetDisable} isDisabled={isResetDisabled} diff --git a/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx index 85da3253e1..39e6578cc8 100644 --- a/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx +++ b/invokeai/frontend/src/common/components/ImageUploadOverlay.tsx @@ -24,13 +24,13 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
{isDragAccept && (
- Upload Image{overlaySecondaryText} + Upload Image{overlaySecondaryText}
)} {isDragReject && (
- Invalid Upload - Must be single JPEG or PNG image + Invalid Upload + Must be single JPEG or PNG image
)}
diff --git a/invokeai/frontend/src/common/components/ImageUploaderButton.tsx b/invokeai/frontend/src/common/components/ImageUploaderButton.tsx index 5cf2375630..1a989b8c8e 100644 --- a/invokeai/frontend/src/common/components/ImageUploaderButton.tsx +++ b/invokeai/frontend/src/common/components/ImageUploaderButton.tsx @@ -22,7 +22,7 @@ const ImageUploaderButton = (props: ImageUploaderButtonProps) => { >
- Click or Drag and Drop + Click or Drag and Drop
); diff --git a/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx index 2cd37d64cf..8ce69627dc 100644 --- a/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx +++ b/invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx @@ -17,7 +17,7 @@ const ClearCanvasHistoryButtonModal = () => { acceptCallback={() => dispatch(clearCanvasHistory())} acceptButtonText={t('unifiedcanvas:clearHistory')} triggerComponent={ - } isDisabled={isStaging}> + } isDisabled={isStaging}> {t('unifiedcanvas:clearCanvasHistory')} } diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx index a077884a99..b57bc1cc16 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvas.tsx @@ -140,7 +140,7 @@ const IAICanvas = () => { { onWheel={handleWheel} draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox} > - + - + diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx index a572c4418d..cfdbddb1e2 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx @@ -49,7 +49,7 @@ const IAICanvasBoundingBoxOverlay = () => { offsetY={stageCoordinates.y / stageScale} height={stageDimensions.height / stageScale} width={stageDimensions.width / stageScale} - fill={'rgba(0,0,0,0.4)'} + fill="rgba(0,0,0,0.4)" listening={false} visible={shouldDarkenOutsideBoundingBox} /> @@ -58,10 +58,10 @@ const IAICanvasBoundingBoxOverlay = () => { y={boundingBoxCoordinates.y} width={boundingBoxDimensions.width} height={boundingBoxDimensions.height} - fill={'rgb(255,255,255)'} + fill="rgb(255,255,255)" listening={false} visible={shouldDarkenOutsideBoundingBox} - globalCompositeOperation={'destination-out'} + globalCompositeOperation="destination-out" /> ); diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx index 7ff5ecb6a6..5417e101f8 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx @@ -163,10 +163,10 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => { width={stageDimensions.width / stageScale} fillPatternImage={fillPatternImage} fillPatternOffsetY={!isNumber(offset) ? 0 : offset} - fillPatternRepeat={'repeat'} + fillPatternRepeat="repeat" fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }} listening={true} - globalCompositeOperation={'source-in'} + globalCompositeOperation="source-in" {...rest} /> ); diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx index 4da61231d1..0ff1101626 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx @@ -36,7 +36,7 @@ const IAICanvasLines = (props: InpaintingCanvasLinesProps) => { 0 + stroke="rgb(0,0,0)" // The lines can be any color, just need alpha > 0 strokeWidth={line.strokeWidth * 2} tension={0} lineCap="round" diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx index d7f7a05160..3ee493c7c0 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx @@ -93,8 +93,8 @@ const IAICanvasObjectRenderer = () => { y={obj.y} width={obj.width} height={obj.height} - fill={'rgb(255, 255, 255)'} - globalCompositeOperation={'destination-out'} + fill="rgb(255, 255, 255)" + globalCompositeOperation="destination-out" /> ); } diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx index 17155b3cae..5ccb072942 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx @@ -67,7 +67,7 @@ const IAICanvasStagingArea = (props: Props) => { width={width} height={height} strokeWidth={1} - stroke={'white'} + stroke="white" strokeScaleEnabled={false} /> { height={height} dash={[4, 4]} strokeWidth={1} - stroke={'black'} + stroke="black" strokeScaleEnabled={false} /> diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx index ea088cf722..de45654244 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx @@ -114,11 +114,11 @@ const IAICanvasStagingAreaToolbar = () => { return ( { x={brushX} y={brushY} radius={radius} - stroke={'rgba(255,255,255,0.4)'} + stroke="rgba(255,255,255,0.4)" strokeWidth={strokeWidth * 2} strokeEnabled={true} listening={false} @@ -181,7 +181,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => { x={brushX} y={brushY} radius={radius} - stroke={'rgba(0,0,0,1)'} + stroke="rgba(0,0,0,1)" strokeWidth={strokeWidth} strokeEnabled={true} listening={false} @@ -192,14 +192,14 @@ const IAICanvasToolPreview = (props: GroupConfig) => { x={brushX} y={brushY} radius={dotRadius * 2} - fill={'rgba(255,255,255,0.4)'} + fill="rgba(255,255,255,0.4)" listening={false} /> diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx index 0e939dbac0..58577f999f 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx @@ -269,12 +269,12 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => { { } > - + { color={maskColor} onChange={(newColor) => dispatch(setMaskColor(newColor))} /> - } onClick={handleClearMask}> + } onClick={handleClearMask}> {t('unifiedcanvas:clearMask')} (Shift+C) diff --git a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx index 0a90b97538..58a7d8b794 100644 --- a/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx +++ b/invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx @@ -97,7 +97,7 @@ const IAICanvasSettingsButtonPopover = () => { /> } > - + { /> } > - - + + { >
} > {t('parameters:sendToImg2Img')} } > @@ -430,14 +430,14 @@ const CurrentImageButtons = () => { } > {t('parameters:copyImage')} } > @@ -445,7 +445,7 @@ const CurrentImageButtons = () => { - } size={'sm'} w="100%"> + } size="sm" w="100%"> {t('parameters:downloadImage')} diff --git a/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx index dc32db215b..720df07f4a 100644 --- a/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx +++ b/invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx @@ -82,7 +82,7 @@ export default function CurrentImagePreview() { }; return ( -
+
{imageToDisplay && ( - + Are you sure? Deleted images will be sent to the Bin. You can restore from there if you wish to. - + Don't ask me again { > @@ -189,15 +189,15 @@ const HoverableImage = memo((props: HoverableImageProps) => { objectFit={ shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit } - rounded={'md'} + rounded="md" src={thumbnail || url} - loading={'lazy'} + loading="lazy" />
{isSelected && ( @@ -210,7 +210,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { aria-label={t('parameters:deleteImage')} icon={} size="xs" - variant={'imageHoverIconButton'} + variant="imageHoverIconButton" fontSize={14} isDisabled={!mayDeleteImage} /> @@ -221,7 +221,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { { e.detail.originalEvent.preventDefault(); }} diff --git a/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx b/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx index 41929d0126..46e133a4e2 100644 --- a/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx +++ b/invokeai/frontend/src/features/gallery/components/ImageGallery.tsx @@ -281,7 +281,7 @@ export default function ImageGallery() { dispatch(setCurrentCategory('result'))} > {t('gallery:generations')} dispatch(setCurrentCategory('user'))} > @@ -433,14 +433,14 @@ export default function ImageGallery() { } className="image-gallery-icon-btn" - cursor={'pointer'} + cursor="pointer" /> } > @@ -455,7 +455,7 @@ export default function ImageGallery() { label={t('gallery:galleryImageSize')} /> dispatch(setGalleryImageMinimumWidth(64))} @@ -505,8 +505,8 @@ export default function ImageGallery() { } - size={'xs'} - variant={'ghost'} + size="xs" + variant="ghost" fontSize={20} onClick={onClick} /> @@ -83,23 +83,23 @@ const MetadataItem = ({ } - size={'xs'} - variant={'ghost'} + size="xs" + variant="ghost" fontSize={14} onClick={() => navigator.clipboard.writeText(value.toString())} /> )} - + {label}: {isLink ? ( - + {value.toString()} ) : ( - + {value.toString()} )} @@ -163,10 +163,10 @@ const ImageMetadataViewer = memo( return (
- + - File: - + File: + {image.url.length > 64 ? image.url.substring(0, 64).concat('...') : image.url} @@ -304,7 +304,7 @@ const ImageMetadataViewer = memo( )} {postprocessing && postprocessing.length > 0 && ( <> - Postprocessing + Postprocessing {postprocessing.map( ( postprocess: InvokeAI.PostProcessedImageMetadata, @@ -313,13 +313,8 @@ const ImageMetadataViewer = memo( if (postprocess.type === 'esrgan') { const { scale, strength, denoise_str } = postprocess; return ( - - {`${ + + {`${ i + 1 }: Upscale (ESRGAN)`} - {`${ + + {`${ i + 1 }: Face restoration (GFPGAN)`} @@ -371,13 +361,8 @@ const ImageMetadataViewer = memo( } else if (postprocess.type === 'codeformer') { const { strength, fidelity } = postprocess; return ( - - {`${ + + {`${ i + 1 }: Face restoration (Codeformer)`} @@ -413,30 +398,30 @@ const ImageMetadataViewer = memo( value={dreamPrompt} /> )} - + - + } - size={'xs'} - variant={'ghost'} + size="xs" + variant="ghost" fontSize={14} onClick={() => navigator.clipboard.writeText(metadataJSON) } /> - Metadata JSON: + Metadata JSON: -
+
{metadataJSON}
) : ( -
- +
+ No metadata available
diff --git a/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx b/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx index 196fa1bfe1..af93704c82 100644 --- a/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx +++ b/invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx @@ -23,8 +23,8 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) { return ( - - + + {header} {additionalHeaderComponents} diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx index f6da49e1c6..9af75a363a 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx @@ -63,7 +63,7 @@ const FaceRestoreSettings = () => { const { t } = useTranslation(); return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx index 89075f653a..3aa2425dff 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx @@ -49,7 +49,7 @@ const HiresStrength = () => { isInteger={false} withInput withSliderMarks - inputWidth={'5.5rem'} + inputWidth="5.5rem" withReset handleReset={handleHiResStrengthReset} isSliderDisabled={!hiresFix} @@ -75,10 +75,10 @@ const HiresSettings = () => { dispatch(setHiresFix(e.target.checked)); return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx index 11e037b801..f037e79523 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx @@ -3,7 +3,7 @@ import SeamlessSettings from './SeamlessSettings'; const ImageToImageOutputSettings = () => { return ( - + ); diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx index f741a79406..1eaba1eaae 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx @@ -4,7 +4,7 @@ import SeamlessSettings from './SeamlessSettings'; const OutputSettings = () => { return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx index 4107d02c8e..dd7afd5bb7 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx @@ -22,10 +22,10 @@ const SeamlessSettings = () => { const { t } = useTranslation(); return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx index 33798de4a4..d524ace666 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx @@ -10,7 +10,7 @@ import Threshold from './Threshold'; */ const SeedSettings = () => { return ( - + diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx index 32841dfe2d..f3f129bdba 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx @@ -18,7 +18,7 @@ export default function ShuffleSeed() { return (
- {t('settings:resetWebUI')} + {t('settings:resetWebUI')} @@ -232,8 +232,8 @@ const SettingsModal = ({ children }: SettingsModalProps) => { - - + + {t('settings:resetComplete')} diff --git a/invokeai/frontend/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/src/features/system/components/SiteHeader.tsx index 1bc516e926..af2d408d99 100644 --- a/invokeai/frontend/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/src/features/system/components/SiteHeader.tsx @@ -56,7 +56,7 @@ const SiteHeader = () => { { { variant="link" data-variant="link" fontSize={20} - size={'sm'} + size="sm" icon={ @@ -100,7 +100,7 @@ const SiteHeader = () => { variant="link" data-variant="link" fontSize={20} - size={'sm'} + size="sm" icon={ @@ -114,7 +114,7 @@ const SiteHeader = () => { variant="link" data-variant="link" fontSize={20} - size={'sm'} + size="sm" icon={ @@ -129,7 +129,7 @@ const SiteHeader = () => { variant="link" data-variant="link" fontSize={22} - size={'sm'} + size="sm" icon={} /> diff --git a/invokeai/frontend/src/features/system/components/ThemeChanger.tsx b/invokeai/frontend/src/features/system/components/ThemeChanger.tsx index 8bf016be59..38b79402e0 100644 --- a/invokeai/frontend/src/features/system/components/ThemeChanger.tsx +++ b/invokeai/frontend/src/features/system/components/ThemeChanger.tsx @@ -46,7 +46,7 @@ export default function ThemeChanger() { width: '6rem', }} leftIcon={currentTheme === theme ? : undefined} - size={'sm'} + size="sm" onClick={() => handleChangeTheme(theme)} key={theme} > @@ -64,7 +64,7 @@ export default function ThemeChanger() { triggerComponent={ } > - {renderThemeOptions()} + {renderThemeOptions()} ); } diff --git a/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx b/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx index 6c0d848ee8..c9ca2cc6da 100644 --- a/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx +++ b/invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx @@ -35,9 +35,9 @@ export default function InitImagePreview() { {initialImage && (
) : null; } diff --git a/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx index c3a8c3d907..911f95ac77 100644 --- a/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/src/features/ui/components/InvokeTabs.tsx @@ -31,32 +31,32 @@ export interface InvokeTabInfo { export const tabDict: Record = { txt2img: { - title: , + title: , workarea: , tooltip: 'Text To Image', }, img2img: { - title: , + title: , workarea: , tooltip: 'Image To Image', }, unifiedCanvas: { - title: , + title: , workarea: , tooltip: 'Unified Canvas', }, nodes: { - title: , + title: , workarea: , tooltip: 'Nodes', }, postprocess: { - title: , + title: , workarea: , tooltip: 'Post Processing', }, training: { - title: , + title: , workarea: , tooltip: 'Training', }, @@ -122,7 +122,7 @@ export default function InvokeTabs() { key={key} hasArrow label={tabDict[key as keyof typeof tabDict].tooltip} - placement={'right'} + placement="right" > {tabDict[key as keyof typeof tabDict].title} @@ -147,7 +147,7 @@ export default function InvokeTabs() { { diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx index 561f746590..f06c1ae988 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx @@ -45,21 +45,16 @@ const UnifiedCanvasDisplayBeta = () => { }, [dispatch]); return ( -
+
- + {doesCanvasNeedScaling ? : } diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx index cb185e36bb..44deea45c6 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx @@ -4,7 +4,7 @@ import UnifiedCanvasLimitStrokesToBox from './UnifiedCanvasLimitStrokesToBox'; export default function UnifiedCanvasBaseBrushSettings() { return ( - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx index 40f6df1dbf..387495598d 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx @@ -4,7 +4,7 @@ import UnifiedCanvasColorPicker from './UnifiedCanvasColorPicker'; export default function UnifiedCanvasBrushSettings() { return ( - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx index e36e59892c..6b40b92714 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx @@ -49,7 +49,7 @@ export default function UnifiedCanvasBrushSize() { onChange={(newSize) => dispatch(setBrushSize(newSize))} sliderNumberInputProps={{ max: 500 }} inputReadOnly={false} - width={'100px'} + width="100px" isCompact /> ); diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx index 98493bd522..b4beb2b585 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx @@ -14,7 +14,7 @@ export default function UnifiedCanvasClearMask() { return ( } onClick={handleClearMask} tooltip={`${t('unifiedcanvas:clearMask')} (Shift+C)`} diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx index 94dfb7b8ac..e6957a63d7 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx @@ -92,7 +92,7 @@ export default function UnifiedCanvasColorPicker() { /> } > - + {layer === 'base' && ( + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx index 9f3052b116..2c5a8277db 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx @@ -5,7 +5,7 @@ import UnifiedCanvasSnapToGrid from './UnifiedCanvasSnapToGrid'; export default function UnifiedCanvasMoveSettings() { return ( - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx index 1f8c45fef2..4f3cbb508b 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx @@ -68,7 +68,7 @@ const UnifiedCanvasSettings = () => { /> } > - + + {layer == 'base' && ['brush', 'eraser', 'colorPicker'].includes(tool) && ( )} diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx index 3f81451352..4790ddd245 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx @@ -25,7 +25,7 @@ export default function UnifiedCanvasProcessingButtons() { }; return ( - + - + ); diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx index 9602150d43..a738379f5f 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx @@ -113,7 +113,7 @@ const UnifiedCanvasToolSelect = () => { const handleEraseBoundingBox = () => dispatch(addEraseRect()); return ( - + { data-selected={tool === 'colorPicker' && !isStaging} isDisabled={isStaging} onClick={handleSelectColorPickerTool} - width={'max-content'} + width="max-content" /> ); diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx index b3328529fb..9860bd12f7 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx @@ -23,30 +23,30 @@ const UnifiedCanvasToolbarBeta = () => { ); return ( - + - + - + - + - + - + diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx index 12fc1d786f..37e7e71fdb 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx @@ -43,7 +43,7 @@ const UnifiedCanvasDisplay = () => { }, [dispatch]); return ( -
+
From ecc7b7a700b159d94435b3f35ee604c5237d5d6f Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 16 Feb 2023 19:53:46 +1100 Subject: [PATCH 2/7] builds frontend --- invokeai/frontend/stats.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/stats.html b/invokeai/frontend/stats.html index abfa9a018a..fea1123128 100644 --- a/invokeai/frontend/stats.html +++ b/invokeai/frontend/stats.html @@ -6157,7 +6157,7 @@ var drawChart = (function (exports) {